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

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

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('搜神马?');

});

})

好了相当的不错吧下面是一个简单的例子:

无标题文档

function tt(){

var i=document.form1.text1.value;

if(i.length>=6)

document.getElementById("s1").innerHTML="用户名不能大于6位";

else

document.getElementById("s1").innerHTML="";

}

function a(){

var j=document.form1.text2.value;

if(j.length>=6)

document.getElementById("s2").innerHTML="密码不能大于6位"

else

document.getElementById("s2").innerHTML="";

}

用户名:

密码:

第一种: html5

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

其中placeholder就是其中一个,它可以同时完成文本框获得焦点和失去焦点。必须保证input的value值为空, placeholder的内容就是我们在页面上看到的内容。

代码如下:

第二种: jQuery

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

代码如下:

$(function() {

var $input = $("input");

$input.each(function() {

var $title = $(this).attr("title");

$(this).val($title);

$(this).focus(function() {

if($(this).val() === $title) {

$(this).val('');

}

})

.blur(function() {

if($(this).val() === "") {

$(this).val($title);

}

});

});

});

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

无标题页

function text1_onmouseover(it)

{

it.focus();

it.select();

it.style.backgroundColor="red";

}

function text1_onmouseout(it)

{

it.onblur;

it.style.backgroundColor="white";

}

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值