您的位置：首页 > 其它

实现一个最简单的输入框提示功能

2015-09-11 16:08 459 查看 
实现原理：文本框失去焦点事件、获得焦点事件
onBlur:当失去输入焦点后产生该事件
onFocus:当输入获得焦点后，产生该文件
Onchange:当文字值改变时，产生该事件
Onselect:当文字加亮后，产生该文件
onpropertychange当属性改变发生该事件
无论粘贴keyuponchange等，最为敏感

先来看javascript的直接写在了input上，代码如下:


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


jquery实现方法
对于元素的焦点事件，我们可以使用jQuery的焦点函数focus(),blur()。
focus()：得到焦点时使用，和javascript中的onfocus使用方法相同。
代码如下:
$("p").focus();或$("p").focus(fn)
blur()：失去焦点时使用，和onblur一样。
代码如下:
$("p").blur();或$("p").blur(fn)

实例代码如下:


<form>
<labelfor="searchKey"id="lbSearch">搜神马？</label>这里label覆盖在文本框上，可以更好的控制样式
<inputid="searchKey"type="text"/>
<inputtype="submit"value="搜索"/>
</form>


jquery代码
代码如下:


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


好了相当的不错吧，下面是一个简单的例子：
代码如下:


<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>无标题文档</title>
</head>
<script>
functiontt(){
vari=document.form1.text1.value;
if(i.length>=6)
document.getElementById("s1").innerHTML="用户名不能大于6位";
else
document.getElementById("s1").innerHTML="";
}
functiona(){
varj=document.form1.text2.value;
if(j.length>=6)
document.getElementById("s2").innerHTML="密码不能大于6位"
else
document.getElementById("s2").innerHTML="";
}
</script>
<body>
<formname="form1">
用户名：<inputtype="text"id="text1"value="请输入用户名"onfocus="javascript:document.form1.text1.value=''"onblur="tt()"/>
<spanid="s1"></span><br/>
密码:<inputtype="text"id="text2"value="请输入密码"onfocus="javascript:document.form1.text2.value=''"onblur="a()"/>
<spanid="s2"></span><br/>
<inputtype="button"id="button"value="登陆"/>
</form>
</body>
</html>


第一种：html5
html5给表单文本框新增加了几个属性，比如：email,tel,number,time,required,autofocus,placeholder等等，这些属性给表单效果带来了极大的效果变化。
其中placeholder就是其中一个，它可以同时完成文本框获得焦点和失去焦点。必须保证input的value值为空，placeholder的内容就是我们在页面上看到的内容。

代码如下：
<inputtype="text"value=""placeholder="请输入内容"/>
第二种：jQuery
原理：让表单的val值等于其title值。

代码如下：
<inputtype="text"value=""title="请输入内容"/>
代码如下:


<scripttype="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

代码如下:


<%@PageLanguage="VB"CodeFile="focus.aspx.vb"Inherits="focus"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>无标题页</title>
<scriptlanguage="javascript">
functiontext1_onmouseover(it)
{
it.focus();
it.select();
it.style.backgroundColor="red";
}
functiontext1_onmouseout(it)
{
it.onblur;
it.style.backgroundColor="white";
}
</script>
</head>
<body>
<formid="form1"runat="server">
<div>
<asp:TextBoxID="TextBox1"onmouseover="returntext1_onmouseover(this);"onblur="text1_onmouseout(this)"runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>



                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航