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. python库的tkinter带你进入GUI世界(计算器简单功能)

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 一个处女座的程序猿 PS:如有需要Python学习资料的小伙伴可以加 ...

  2. 2019年上半年收集到的人工智能LSTM干货文章

    2019年上半年收集到的人工智能LSTM干货文章 门控神经网络:LSTM 和 GRU 简要说明 LSTM-CNN-Attention算法系列之一:LSTM提取时间特征 对时间序列分类的LSTM全卷积网 ...

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

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

  4. 剑指offer 20：顺时针打印矩阵

    题目描述 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下4 X 4矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 则依次打印出数 ...

  5. Python类的定义、方法和属性使用

    类用来描述具有相同的属性和方法的对象的集合.对于在类中定义的函数,称为方法.类变量不直接叫做类变量,称为属性. 1.类的定义 例子: class User(): pass 说明: (1)定义了一个类名 ...

  6. git commit 新修改的内容 添加到上次提交中 减少提交的日志

    有时候提交过一次记录只有,又修改了一次,仅仅是改动一些较少的内容,可以使用git commit --amend. 添加到上次提交过程中: --amend amend previous commit g ...

  7. qt 网络库使用介绍

    qt 网络库使用介绍 在.pro文件中,要手动添加network模块:QT += network 有三个核心类, QNetworkAccessManager: 发送get或者post请求. 用get方 ...

  8. java面试填坑解惑篇

    感谢原文出处:https://www.cnblogs.com/javazhiyin/ NO1.请简单描述JDK和JRE的区别? NO1.回答JDK和JRE的区别这道题,首先要回答两个名次的概念,JDK ...

  9. nginx典型官方模块解释

    模块名称 作用 语法 默认 配置位置 配置举例 结果验证 备注 1 --with-http_stub_status_module 监控Nginx的服务器连接状态 stub_status   serve ...

  10. equals和==的应用场景

    今天我知道了 抽象类主要作为多个类的模板,接口则定义了多个类应该遵守的规范. "=="比"equals"运行速度快,因为"=="只是比较引用 ...