失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > html5文本框获取焦点 文本框获得焦点和失去焦点的判断代码

html5文本框获取焦点 文本框获得焦点和失去焦点的判断代码

时间:2019-02-08 23:39:49

相关推荐

html5文本框获取焦点 文本框获得焦点和失去焦点的判断代码

文本框失去焦点事件、获得焦点事件

onBlur:当失去输入焦点后产生该事件

onFocus:当输入获得焦点后,产生该文件

Onchange:当文字值改变时,产生该事件

Onselect:当文字加亮后,产生该文件

onpropertychange 当属性改变发生该事件

无论粘贴 keyup onchange等,最为敏感

先来看javascript的直接写在了input上

代码如下:

jquery实现方法

对于元素的焦点事件,我们可以使用jQuery的焦点函数focus(),blur()。

focus():得到焦点时使用,和javascript中的onfocus使用方法相同。

如:

代码如下:

$("p").focus(); 或$("p").focus(fn)

blur():失去焦点时使用,和onblur一样。

如:

代码如下:

$("p").blur(); 或$("p").blur(fn)

实例

代码如下:

搜神马?这里label覆盖在文本框上,可以更好的控制样式

jquery代码

代码如下:

$(function() {

$('#searchKey').focus(function() {

$('#lbSearch').text('');

});

$('#searchKey').blur(function() {

var str = $(this).val();

str = $.trim(str);

if(str == '')

$('#lbSearch').text('搜神马?');

});

})

好了相当的不错吧

下面是一个简单的例子:

代码如下:

用户名:

密码:

第一种: html5

html5给表单文本框新增加了几个属性,比如:email,tel,number,time,required,autofocus,placeholder等等,这些属性给表单效果带来了极大的效果变化。

其中placeholder就是其中一个,它可以同时完成文本框获得焦点和失去焦点。必须保证input的value值为空,

placeholder的内容就是我们在页面上看到的内容。

代码如下:

代码如下:

第二种: jQuery

原理:让表单的val值等于其title值。

代码如下:

代码如下:

代码如下:

文本框获得焦点、失去焦点调用JavaScript

代码如下:

如果觉得《html5文本框获取焦点 文本框获得焦点和失去焦点的判断代码》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。