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. mysql修改数据 -- 主键冲突

    mysql 插入数据唯一键冲突 前提: 修改数据三种可用的方法解决主键冲突的问题 1. insert into ... on duplicate key update set ... 2. updat ...

  2. Java生鲜电商平台-电商会员体系系统的架构设计与源码解析

    Java生鲜电商平台-电商会员体系系统的架构设计与源码解析 说明:Java生鲜电商平台中会员体系作为电商平台的基础设施,重要性不容忽视.我去年整理过生鲜电商中的会员系统,但是比较粗,现在做一个最好的整 ...

  3. LFI （local file inclusion vulnerability）本地文件包含

    代码实例: <?php $file = $_GET['file']; if(isset($file)) { include("pages/$file"); } else { ...

  4. CVE-2019-0708-BlueKeep漏洞复现

    环境 攻击机:Kali Linux IP:192.168.0.108 靶机:Windows Sever 7 SP1 旗舰版 IP:192.168.0.109 Exploit: https://gith ...

  5. git在idea中的冲突解决（非常重要）

    1.什么是冲突 冲突是指当你在提交或者更新代码时被合并的文件与当前文件不一致.读起来有点绕,结合下面的案例理解. 从上面对冲突的定义来看,冲突时发生在同一个文件上的. 2.生产上冲突的场景 常见冲突的 ...

  6. driver.find_element_by_xpath() 带参数时的写法

    假设要定位如下所示的 Elements,且文本 “1234567890” 对应参数 cluster_name: <td  class="xxxx-body">12345 ...

  7. /usr/lib64/python2.7/subprocess.py", line 1327, in _execute_child

    https://www.jb51.net/article/142787.htm gn gn  问题如何解决?????

  8. C语言异常处理

    异常的概念-程序在运行过程中可能产生异常-异常(Exception)与Bug的区别 异常是程序运行时可预料的执行分支 Bug是程序中的错误,是不被预期的运行方式 异常(Exception)和Bug的对 ...

  9. linux/Deepin /Debian 9 Stretch安装Wine

    我们可以使用Debian stretch源在Deepin 15.9系统下安装Wine 4.0,同时也可以用在Debian 9 Stretch系统下安装Wine 4.0,方法是一样的,同时下面介绍的方法 ...

  10. sudo apt-get 与 yum 常用命令

    yum -RedHat:CentOS... -xxx.rpmsudo apt-get  -Debian:Ubuntu...   -xxx.deb 安装工具rpm -ivh yum-2.0.4-1.rh ...