首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Jquery淡化对表单输入焦点的影响

淡化表单输入焦点的影响是指在使用表单输入时,减少或消除焦点效果,以便更好地展示页面内容和设计。在 jQuery 中,可以使用以下方法来实现这一目标:

  1. 使用 blur() 方法来取消表单输入的焦点。
代码语言:javascript
复制
$('input').blur();
  1. 使用 focus() 方法来设置表单输入的焦点。
代码语言:javascript
复制
$('input').focus();
  1. 使用 focusin()focusout() 方法来监听表单输入的焦点状态。
代码语言:javascript
复制
$('input').focusin(function() {
  console.log('输入框获得焦点');
});

$('input').focusout(function() {
  console.log('输入框失去焦点');
});
  1. 使用 hover() 方法来监听表单输入的鼠标悬停事件。
代码语言:javascript
复制
$('input').hover(function() {
  console.log('鼠标悬停在输入框上');
}, function() {
  console.log('鼠标离开输入框');
});
  1. 使用 addClass()removeClass() 方法来添加或删除表单输入的样式。
代码语言:javascript
复制
$('input').focusin(function() {
  $(this).addClass('focus');
});

$('input').focusout(function() {
  $(this).removeClass('focus');
});
  1. 使用 css() 方法来直接修改表单输入的样式。
代码语言:javascript
复制
$('input').focusin(function() {
  $(this).css('border', '2px solid red');
});

$('input').focusout(function() {
  $(this).css('border', '1px solid #ccc');
});

通过以上方法,可以实现对表单输入焦点的淡化,以便更好地展示页面内容和设计。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

java文本框获得输入焦点_文本框获得焦点和失去焦点的判断代码

文本框失去焦点事件、获得焦点事件 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect:当文字加亮后,产生该文件...onpropertychange 当属性改变发生该事件 无论粘贴 keyup onchange等,最为敏感 先来看javascript的直接写在了input上 jquery实现方法 对于元素的焦点事件...,我们可以使用jQuery的焦点函数focus(),blur()。...,比如:email,tel,number,time,required,autofocus,placeholder等等,这些属性给表单效果带来了极大的效果变化。...代码如下: 第二种: jQuery 原理:让表单的val值等于其title值。

4K40
  • 【转】jQuery验证控件jquery.validate.js使用说明+中文API

    "请输入拥有合法后缀名的字符串", maxlength: jQuery.validator.format("请输入一个 长度最多是 {0} 的字符串"), minlength: jQuery.validator.format...("请输入一个 长度最少是 {0} 的字符串"), rangelength: jQuery.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符串"), range...: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"), max: jQuery.validator.format("请输入一个最大为{0} 的值"),...,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点 focusCleanup:Boolean  Default: false 如果是true那么当未通过验证的元素获得焦点时,...,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点 $(".selector").validate({    focusInvalid:false }) focusCleanup

    4.7K40

    分析:input表单输入框默认提示信息

    相信上面两张图片上的输入框里有提示信息这功能大家都见过,有的人应该也自己动手做过。   ...我之前也做过,做法应该和大家都差不多,在输入框里写入提示内容,当鼠标获取焦点后清空内容,当失去焦点后判断内容是否为空,如果为空,则恢复显示提示内容,反则不显示。但这样的做法是否合理?...1、如果输入内容和提示内容完全一样,当失去焦点后,应该如何判断?   ...其实方法很简单,把提示信息单独写在一个模块里,如div,然后设置这个div的样式,让它浮动到输入框上面,至于js,只需多写一句,当我点击这个div的时候,也触发input框的获取焦点事件即可。   ...   附1:这个功能我已经整合在我自己写的插件里,欢迎查看:jquery.HooRay——自己做的一个jquery常用工具插件   附2:了解HTML5的PLACEHOLDER

    3.1K50

    jquery 绑定事件 - blur() 失去焦点 - focus() 获取焦点

    scroll() 滚动条的位置发生变化 submit() 用户递交表单 编写一个form表单,用来演示输入框获取焦点和失去焦点的示例 ?...好了,有了基本的HTML架构之后,就可以来演示了。 focus() 元素获得焦点 首先先来这个focus()函数。 ? 可以看到当获取焦点的时候,就立即弹出alert()。...其实通过focus()函数只是简单用来初始化文本框的焦点输入的而已,如下: ? 当刚进入页面,文本框就自动获取焦点,这基本上就是这个方法的大部分用法了。...blur() 元素失去焦点 使用blur()失去焦点这个方法一般会结合获取文本框内容的函数一起使用,如下: ? 当获取到文本框内的值之后,就可以对其进行正则验证或者其他方式的校验。...那么这里有一个疑问,就是密码框输入内容的话,能否获取到值呢? ? 密码框也是可以正常获取值的。 完整代码 <!

    12.4K30

    4-Jquery学习四-事件操作

    即使是执行live()函数之后新添加的元素,只要它匹配当前jQuery对象的选择器,绑定的事件处理函数仍然对其有效。 要删除通过live()绑定的事件,请使用die()函数。...即使是执行on()函数之后新添加的元素,只要它符合条件,绑定的事件处理函数也对其有效。 要删除通过on()绑定的事件,请使用off()函数。...以表单元素为例,使用trigger("submit")可以触发该表单绑定的submit事件,也会执行表单submit事件的默认行为——表单提交操作。...[' + map[this.name] + ']' ); } ); 18,blur blur事件就是获得失去鼠标光标焦点事件 注意: 并不是所有元素都可以失去焦点,可以获得鼠标光标焦点的元素主要是表单输入元素...事件绑定处理函数 // 文本框失去焦点时,进行表单验证,并显示相应的提示信息 $(":text").blur( inputMap, function(event){ var map = event.data

    4.5K90

    jQuery formValidator表单验证插件

    jQuery formValidator表单验证插件是客户端表单验证插件。...Query formValidator表单校验插件支持的验证功能(还有很多功能没有罗列)罗列如下: 支持所有类型客户端控件的校验 支持jQuery所有的选择器语法,只要控件有唯一ID和type属性。...第一种:刚打开网页的时候进行提示;第二种:获得焦点的时候进行提示;第三种:失去焦点时,校验成功时候的提示;第四种:失去焦点时,校验失败的错误提示。 支持自动构建提示层。 支持自定义错误提示信息。...支持输入格式的校验。...使用插件必须加载的文件 [top] //加载jQuery类库 jquery_last.js" type="text/javascript"> //加载插件的样式库

    2.5K90

    jquery校验规则的使用

    accept: "请输入拥有合法后缀名的字符串", maxlength: jQuery.validator.format("请输入一个长度最多是 {0} 的字符串"), minlength...: jQuery.validator.format("请输入一个长度最少是 {0} 的字符串"), rangelength: jQuery.validator.format("请输入一个长度介于...{0} 和 {1} 之间的字符串"), range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"), max: jQuery.validator.format...("请输入一个最大为 {0} 的值"), min: jQuery.validator.format("请输入一个最小为 {0} 的值") }); 推荐做法,将此文件放入messages_cn.js...,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点 focusCleanup:Boolean Default: false 如果是true那么当未通过验证的元素获得焦点时

    5K30

    day01jQuery节点操作

    jquery对象) //jquery为常用属性额外定义的对应的方法 也定义的通用的属性操作方法 //对innerHTML 与innerTEXT提供的方法 var $d1 = $...show(){ alert($(this).html()) } 5.2 焦点事件 当元素获取焦点及失去焦点时触发该事件,失去焦点blur,获取焦点focus //焦点事件,当输入框获取到焦点时改变其背景颜色...$('input').focus(function(){ $(this).css('background-color','pink') }) //失去焦点事件,当输入框失去焦点时将背景变为白色...$('input').blur(function(){ $(this).css('background-color','white') }) 5.3 表单提交事件 submit事件简化了js中的表单提交事件...//该函数的目的是为了验证表单中的数据,并给出验证的结果 function check(){ return false; } //jQuery中直接在函数返回结果即可 $('form').

    2700

    jQuery就业课程之表单选择器系列

    表单选择器 重要,不难 求同存异,利用之前的知识,迁移过来。判断的是表单的类型,注意,判断的是表单元素的类型,类型,类型。...2.6 属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作。...比如attr()、removeAttr() DOM属性操作:对DOM元素的属性进行读取,设置和移除操作。...#%&*])+ 总结: 1.选择器重点讲了好几个,今天是表单选择器; 2.掌握如何针对某个选择器进行操作,规律:三个字总结:找 事 匿 3.jQuery链式操作 2.6 作业 使用jQuery+正则表达式...,对表单注册进行简单的验证。

    8310

    validationEngine参数详解

    validationEngine ·jQuery v1.4.4+ 注意事项: 1.演示版本为 v2.2.4; 2.v2.0 以下的版本参数并不完全通用; 对 validationEngine.jquery.css...对 jquery.validationEngine.js 文件进行修改,修改如下: 1.将 312 行的 field.focus(); 注释掉,当有输入控件在 Table 内部时,验证会导致回到顶部的现象...; 对 jquery.validationEngine-zh_CN.js 文件进行修改,修改如下: 1.修改部分提示文字; 2.增加两个对中文字符的验证规则:minSizeCN 和 maxSizeCN;...scroll true 屏幕自动滚动到第一个验证不通过的位置 focusFirstField true 验证未通过时,是否给第一个不通过的控件获取焦点 promptPosition “topRight”...若不输入,不要求必填,若有输入,则验证其是否符合要求。

    2.9K20
    领券