首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

JS如何为表单聚焦控件设置醒目的样式

在用户填写表单时,为了让用户集中精力填写或某一个表单控件,可以通过设置此空间的样式来达到目的 那这样的效果如何实现呢,如下示例所示的 示例展示 (https://coder.itclan.cn/fontend/js.../26-set-form-style/) 原生Js实现 如下是简易的示例代码,要想实现这一个效果,必须要知道onfocus和onblur,前者是聚焦的回调事件,而后者是控件失去焦点的回调 在一个网页里,...elements.length;i++) { var e = elements[i]; // 当前的控件 e.onfocus = function() { // 定义聚焦的样式回调...lang="scss" scoped> .wrap { text-align: center; margin: 20px 0 20px 0; } 总结 无论是原生js...还是Vue版本实现,都需要使用onblur(input框失去焦点)与onfocus(input框聚焦焦点),实现的核心原理都是相似的,只是在框架里去控制,表现形式有些不一样

7.2K50

利用placeholder属性来添加输入框默认文字提示,提高用户体验

一、JS 控制默认文字 先说一下问题: 用 HotNewspro 主题的网站,默认的留言输入框是这样的: ? 常规情况下,光标聚焦留言输入框,这个预设提示文字是会自动消失的: ?...好了,先来看下 HotNewspro 的这个预设提示文字的 js 代码,这个 js 代码位于主题 js 目录下的 custom.js 文件中: //Comments $(document).ready(...function(){ // 当鼠标聚焦 if($('#comment').val()==""){     $('#comment').val('留言是种美德,写点什么...').css({color:...鼠标 onclick 点击时,判断输入框是不是初始的【默认提示文字】,如果是就清空; b. 鼠标光标离开输入框时,判断输入框里面是否为空,如果为空就自动填入【默认提示文字】。...三、解决问题 现在回到文章最开始提出的 HotNewspro 评论输入框的问题,解决很简单: ①、先编辑 HotNewspro 主题=>js 目录下的 custom.js 文件,搜索"//Comments

3.7K90
领券