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爬取网站视频保存到本地

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

  2. Python之Beautiful Soup 4使用实例

    Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库,它能够通过你喜欢的转换器实现惯用的文档导航.查找.修改文档的方式.Beautiful Soup 4 官方文档: ...

  3. [转]HotSpot VM GC 的种类

    原文地址:http://www.cnblogs.com/redcreen/archive/2011/05/04/2037029.html collector种类 GC在 HotSpot VM 5.0里 ...

  4. yum工具及源码包

    目录 yum工具及源码包 yum yum源 yum实战案例 yum全局配置文件 制作本地yum仓库 构建企业级yum仓库 源码包 yum工具及源码包 yum yum是RedHat以及CentOS中的软 ...

  5. golang的析构函数

    runtime.SetFinalizer 使用这个函数可以给一个对象设置一个析构函数,如果这个对象没有引用了,那么就会调用这个析构函数,然后会把这个对象给释放掉

  6. linux 安装PostgreSQL12

    一.安装步骤 1.设置保存安装包的目录 # cd /usr/local/src 2.开始下载源包 # wget https://ftp.postgresql.org/pub/source/v12.1/ ...

  7. C学习笔记(2)---各类函数

    1.函数(function)声明定义: 见例子,不复述:https://www.runoob.com/cprogramming/c-functions.html 2. 函数参数(Parameters“ ...

  8. O2O 线下业务 和 线上业务，在特征工程上的差异

    人工智能在外卖送达时预估上的应用 这篇讲清楚了 O2O 线下业务 和 线上业务,在特征工程上的差异:

  9. vim跳到最后和最前

    1.跳到尾部和首部 :0或:1跳到文件第一行 :$跳到文件最后一行

  10. Haproxy 构建负载均衡集群

    1.HAPROXY简介 HAProxy提供高可用性.负载均衡以及基于TCP和HTTP应用的代理,支持虚拟主机,它是免费.快速并且可靠的一种负载均衡解决方案.HAProxy特别适用于那些负载特大的web ...