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”;

}

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/148752.html原文链接：https://javaforall.cn