HTML5 中有个新特性叫 placeholder，一般用它来描述输入字段的预期值，适用于 text、search、password 等类型的 input 以及 textarea。示例如下：

<input type="text" placeholder="请输入文本"><br>

<input type="search" placeholder="请输入查询关键字"><br>

<input type="password" placeholder="请输入密码"><br>

<textarea placeholder="请输入描述"></textarea>

对用户来说，placeholder 就是文本框中的输入提示信息，往往是对预期值或预期格式的简短描述。该提示在用户输入之前显示在文本框中，在用户开始输入之后，该提示就会消失，此时文本框中显示的是用户输入的内容。而如果文本框被置空，则该提示会再次显示出来。

然而遗憾的是，早些年还有大量的 IE9 以及更低版本的 IE 用户，这些浏览器都不支持 placeholder 属性。所以那会儿做项目的时候，经常需要用 JS 来模拟 placeholder，以达到类似的效果。实现代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>纯 JS 设置文本框的默认值</title>

</head>

<body>

    <!-- 写法一，设置默认值为 111 -->

    <input type="text" value="111" onfocus="if(this.value == '111'){this.value = ''}"

        onblur="if(this.value == ''){this.value = '111'}" />

    <br />

    <!-- 写法二，设置默认值为 222，为了效果更逼真，将默认值设置为灰色 -->

    <input type="text" value="222" style="color: #cccccc"

        onfocus="if(this.value == '222'){this.value = ''; this.style.color = '#333333'}"

        onblur="if(this.value == ''){this.value = '222'; this.style.color = '#cccccc'}" />

    <br />

    <!-- 写法三，设置默认值为 333，其实上面写法中的 this 可以省略 -->

    <input type="text" value="333" style="color: #cccccc"

        onfocus="if(value == '333'){value = ''; style.color = '#333333'}"

        onblur="if(value == ''){value = '333'; style.color = '#cccccc'}" />

    <br />

    <!-- 写法四，设置默认值为 444，将 html 中的 js 代码提取出来 -->

    <input type="text" value="444" style="color: #cccccc" id="txt4" />

    <script>

        var txt4 = document.getElementById("txt4");

        txt4.onfocus = function () {

            if (this.value == '444') {

                this.value = '';

                this.style.color = '#333333';

            }

        }

        txt4.onblur = function () {

            if (this.value == '') {

                this.value = '444';

                this.style.color = '#cccccc';

            }

        }

    </script>

    <br />

    <!-- 写法五，设置默认值为 555，换一种绑定事件的方式 -->

    <input type="text" value="555" style="color: #cccccc" id="txt5" />

    <script>

        var txt5 = document.getElementById("txt5");

        txt5.addEventListener("focus", function (){

            if (this.value == '555') {

                this.value = '';

                this.style.color = '#333333';

            }

        });

        txt5.addEventListener("blur", function () {

            if (this.value == '') {

                this.value = '555';

                this.style.color = '#cccccc';

            }

        });

    </script>

</body>

</html>

本文链接：http://www.cnblogs.com/hanzongze/p/js-self-placeholder.html

版权声明：本文为博客园博主 韩宗泽 原创，作者保留署名权！欢迎通过转载、演绎或其它传播方式来使用本文，但必须在明显位置给出作者署名和本文链接！个人博客，能力有限，若有不当之处，敬请批评指正，谢谢！

纯 JS 设置文本框的默认提示的更多相关文章

  1. js设置文本框只能输入数字

    JS判断只能是数字和小数点 1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'' ...

  2. winform窗口打开后文本框的默认焦点设置

    原文:http://blog.csdn.net/kongwei521/article/details/6871411 winform窗口打开后文本框的默认焦点设置,进入窗口后默认聚焦到某个文本框,两种 ...

  3. JS给文本框赋值后，在页面后台取不到文本框值的解决方法

    转自:http://www.cnblogs.com/qiaohd/archive/2012/03/23/2413660.html (ReadOnly.disabled 都有可能造成取值取不到) 开发一 ...

  4. jquery设置文本框值 与获取文本框的值

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. .Net 文本框实现内容提示(仿Google、Baidu)

    原文:.Net 文本框实现内容提示(仿Google.Baidu) 1.Demo下载: 文本框实现内容提示(仿Google.Baidu).rar 2.创建数据库.表(我用的sqlserver2008数据 ...

  6. PHP——0128练习相关3——设置文本域的默认值

    都知道文本框的的默认值只要设置value属性即可但是文本域是没有value属性的要设置文本域的默认值只要<textarea>默认值</textarea>即可简单吧,呵呵..

  7. js控制文本框只能输入中文、英文、数字与指定特殊符号.

    先在'' 里输入 onkeyup="value=value.replace(/[^\X]/g,'')" 然后在(/[\X]/g,'')里的 X换成你想输入的代码就可以了, 中文u4 ...

  8. js限制文本框只能输入数字方法小结(转)

    这篇文章主要分享下js代码限制文本框中只能输入数字的多个实例,学习下js控制文本框中输入数字的方法,需要的朋友可以参考下   有时需要限制文本框输入内容的类型,本节分享下正则表达式限制文本框只能输入数 ...

  9. SSRS动态设置文本框属性

    SSRS可以通过表达式动态设置文本框所有的属性,比如字体,字号,是否加粗,如下图所示: 汉字和数字英文字母占用的空间不一样,一个汉字占用两个数字和英文字母的空间,VB里有LENB取得字节数,这SSRS ...

随机推荐

  1. android studio 出现找不到R文件的错误

    百度知道: 检查是否编译了项目.Android studio有时候没有编译就会报出没有R文件的错误. 检查带代码中包名是否正确.有时候从其他地方复制代码过来时连带了包名,也会报出R文件找不到. 检查布 ...

  2. cmd start命令启动文件的路径

    最近在脚本中通过WScript.Shell执行命令行,实现IE打开Chrome的功能. JS代码如下: var singleurl = window.location.href; var isChro ...

  3. IP地址网段表示法

    172.12.34.0/25 子网掩码:用于表示IP地址中的多少位用来做主机号.因为"其中值为1的比特留给网络号和子网号,为0的比特留给主机号"(TCP/IP V1). 172.1 ...

  4. ...mapMutations前面的三个点什么意思

    ...mapMutations(['login']),对象展开运算符

  5. JavaScript之找LHS查询和RHS查询

    LHS和RHS,当变量出现在赋值操作的左侧时进行LHS 查询,出现在右侧时进行RHS 查询. LHS 查询是试图找到变量的容器本身,从而可以对其赋值. RHS 理解成retrieve his sour ...

  6. Linux（ubuntu）下创建用户没有创建家目录

    添加-m参数即可: sudo useradd -m username #参数-m 自动创建用户的家目录 得解也.本来是会自动创建的,但是如果使用ll命令查看没有被创建的话,则应该使用此命令来创建新用户 ...

  7. [b0022] python 归纳 (八)_多进程_基本使用

    # -*- coding: UTF-8 -*- """ 测试进程使用 multiprocessing.Process 使用: 1. 准备一个函数<fun>,子 ...

  8. MSSQL添加外键

    alter table 需要建立外键的表 with check/nocheck add constraint 外键名字 foreign key (需要建立外键的字段名) references 外键表( ...

  9. Python继承、多继承、魔术方法

    继承和多继承的概念和使用 super的用法 __str__ __repr__ __call__ 多继承方法解析顺序和Mix-in开发模式 魔术方法原理和作用 继承 定义类的时候,在类名后面的括号里填继 ...

  10. Linux 查看端口机服务

    Linux如何查看端口 1.lsof -i:端口号 用于查看某一端口的占用情况,比如查看8000端口使用情况,lsof -i:8000 2.2.netstat -tunlp |grep 端口号,用于查 ...