论坛风格切换切换到宽版
  • 3339阅读
  • 1回复

INPUT输入框中默认文字,点击消失的解决方法 [复制链接]

上一主题 下一主题
离线sky
 

发帖
3454
铜币
23247
威望
1793
只看楼主 倒序阅读 使用道具 楼主  发表于: 2014-07-18
经过查询,发现2种实现方式:
1.
<input type="text" value="请输入用户名" onfocus="if(value=='请输入用户名') {value=''}" onblur="if (value=='') {value='请输入用户名'}">
直接在input中定义onfocus和onblur事件,缺点:鼠标一离开就显示提示文字,输入框中用户的输入也会消失。
2.提示文字根据焦点自动消失的输入框javascript
2的功能较1来说较全面,代码也稍复杂一点,功能包括:
鼠标点击输入框,输入框获得焦点时,提示文字自动消失
鼠标焦点离开输入框,提示文字根据情况显示
输入框html代码
<input id="searchKey" type="text" name="q" value="" tips="请输入关键字"/><br />
<script language="javascript" type="text/javascript"> window.onload = function(){ var o=document.getElementByIdx_x("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(); } <script>
离线天地人

发帖
2364
铜币
25180
威望
666
只看该作者 沙发  发表于: 2014-09-12
学习了,感谢
快速回复
限100 字节
如果您提交过一次失败了,可以用”恢复数据”来恢复帖子内容
 
上一个 下一个