注册下一步实现代码,文本框获得焦点和失去焦
分类:前端技术

复制代码 代码如下:

点击事件:

文本框失去核心事件、拿到主旨事件
onBlur:当失去输入核心后产生该事件
onFocus:当输入获得主题后,发生该文件
Onchange:当文字值退换时,产生该事件
Onselect:当文字加亮后,发生该文件
onpropertychange 当属性改变产生该事件
任由粘贴 keyup onchange等,最为敏感

<input id=my onchange="focusTest();"/>
<input id=my onblur="focusTest();"/>
function focusTest()
{
  var my=document.getElementById("my");
  if(my.value="")
  {
    my.focus();//如果是onblur则执行,起作用;
  }
}

<body>

先来看javascript的一贯写在了input上

代码如下: input id=my onchange="focusTest();"/ input id=my onblur="focusTest();"/ function focusTest() { var my=document.getElementById("my"); if(my.value="") { my...

<input type="button" id="btn1"/>

复制代码 代码如下:

<input type="button" value="按 钮" onclick="btn_click()" />

<input name="pwuser" type="text" id="pwuser"   class="input" value="楼盘账号"   onBlur="if(this.value=='') this.value='楼盘账号';" onFocus="if(this.value=='楼盘账号') this.value='';" />
<input name="pwpwd" type="password"    class="input1" value="******"  onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';">  

</body>

jquery落成格局

<script>

对于成分的规范事件,我们得以应用jQuery的火热函数focus(),blur()。

var btn1=document.getElementById("btn1");
btn1.onclick=function(){
alert("点击");
}              //点击出发事件,第一种办法

focus():获得问题时行使,和javascript中的onfocus使用格局一致。
如:

function btn_click(){
alert("点击");
}                 //点击出发事件,第二种方法

复制代码 代码如下:

</script>

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

<body>

blur():失去主题时行使,和onblur同样。
如:

<input type="text" onblur="alert('失去主旨')"/>             //onblur 鼠标点击标签范围外的区域则张开提醒
<select onchange="alert('更动')">                               //onchange退换选项则开展提醒
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<input type="text" onkeyup="alert('开关抬起')" />                     //onkeyup   输入截至则进行提示
<img src="../../img/qlrc-t/10292114_b20170717170239.gif"
onmouseover="alert('鼠标移上')" />                                         // onmouseover  鼠标移到制定区域提示

复制代码 代码如下:

</body>

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

 

实例

事件选拔实例:同意   =》  下一步

复制代码 代码如下:

<body>

<form>
<label for="searchKey" id="lbSearch">搜神马?</label>  这里label覆盖在文本框上,能够越来越好的决定样式
<input id="searchKey" type="text" />
<input type="submit" value="搜索" />
 </form>  

<input type="checkbox" id="c1" />
<label for="c1">同意</label>
<input type="button" value="下一步" disabled="disabled" id="btn" />

jquery代码

</body>

复制代码 代码如下:

<script>

$(function() {
$('#searchKey').focus(function() {
$('#lbSearch').text('');
});
$('#searchKey').blur(function() {
var str = $(this).val();
str = $.trim(str);
if(str == '')
$('#lbSearch').text('搜神马?');
});
})

var c1=document.getElementById('c1');
var btn=document.getElementById('btn');

好了一定的正确性啊

c1.onchange=function(){
if(!c1.checked){
btn.setAttribute("disabled","disabled");
}else{
btn.removeAttribute("disabled");
}
}

上面是二个简练的例子:

</script>

复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文书档案</title>
</head>
<script>
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="";
}

</script>
<body>
<form name="form1">
顾客名:<input type="text" id="text1" value="请输入客户名" onfocus="javascript:document.form1.text1.value=''" onblur="tt()"/>
<span id="s1"></span><br />
密码:<input type="text" id="text2" value="请输入密码" onfocus="javascript:document.form1.text2.value=''" onblur="a()"/>
<span id="s2"></span><br />
<input type="button" id="button" value="登陆" />
</form>
</body>
</html>

第一种: html5

html5给表单文本框新增了几特本性,举例:email,tel,number,time,required,autofocus,placeholder等等,这个属性给表单效果带来了庞然大物的功力变化。
里面placeholder就是内部二个,它能够何况实现文本框获得主旨和失去主题。必需确认保证input的value值为空, placeholder的剧情正是大家在页面上看到的源委。
代码如下:

复制代码 代码如下:

<input type="text" value="" placeholder="请输入内容" />

第二种: jQuery

规律:让表单的val值等于其title值。
代码如下:

复制代码 代码如下:

<input type="text" value="" title="请输入内容" />

复制代码 代码如下:

<script type="text/javascript">
$(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);
}
});
});
});
</script>

文本框获得宗旨、失去宗旨调用JavaScript

复制代码 代码如下:

<%@ Page Language="VB" CodeFile="focus.aspx.vb" Inherits="focus" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns="" >
<head runat="server">
<title>无标题页</title>
<script language="javascript">
function text1_onmouseover(it)
{
it.focus();
it.select();
it.style.backgroundColor="red";
}
function text1_onmouseout(it)
{
it.onblur;
it.style.backgroundColor="white";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" onmouseover="return text1_onmouseover(this);" onblur="text1_onmouseout(this)" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>

onBlur:当失去输入焦点后爆发该事件 onFocus:当输入得到主旨后,发生该公文 Onchange:当文字值更改时,产...

本文由pc28.am发布于前端技术,转载请注明出处:注册下一步实现代码,文本框获得焦点和失去焦

上一篇:使用jQuery同时控制四张图片的伸缩实现代码,修 下一篇:没有了
猜你喜欢
热门排行
精彩图文