[原创]提示文字根据焦点自动消失的输入框javascript-CSDN博客

输入框html代码

<input id="searchKey" type="text" name="q" value="" tips="请输入关键字"/><br />

js脚本语言,完成功能:
a.页面加载完毕输入框中显示提示文字,可在上边的输入框属性tips中自定义
b.鼠标点击输入框,输入框获得焦点时,提示文字自动消失
c.鼠标焦点离开输入框,提示文字根据情况显示网上好多实例代码是鼠标一离开就显示提示文字,输入框中用户的输入也会消失-----不合理，有的保存了用户输入,离开时还是会显示提示文字,再获得焦点是显示用户的输入,也不太符合习惯
经本人修改:判断输入框中如果有用户输入,则焦点离开时输入不会被提示文字取代,并且再次获得焦点时,光标自动位于文字的最后方,这也是经常使用的一个小技巧,提高用户体验.
d.这样就可以和一个button完美组合成一个输入框了,检索服务等等...

<script language="javascript" type="text/javascript">
//输入框内水印
window.onload = function(){
var o=document.getElementById("searchKey");
    o.setAttribute("valueCache",o.value);
    o.onblur = function(){
if(o.value=="")
        {
            o.valueCache="";
            o.value=o.tips;
        }
else
o.valueCache=o.value;
    }
    o.onfocus = function(){
        o.value=o.valueCache; 
//光标始终在文字最后
var e = event.srcElement;
var r =e.createTextRange();
        r.moveStart('character',e.value.length);
        r.collapse(true);
        r.select();
    }
    o.onblur();
}