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. for与foreach区别

    首先说一下for循环: 格式:for( ; ; ){}; public static void main(String[] args) { List<String> arr = new A ...

  2. 常见的Web源码泄露总结

    常见的Web源码泄露总结 源码泄露方式分类 .hg源码泄露 漏洞成因: hg init 的时候会生成 .hg 漏洞利用: 工具: dvcs-ripper .git源码泄露 漏洞成因: 在运行git i ...

  3. 从0系统学Android-1.4日志工具的使用

    更多精品文章分类 1.4 日志工具 简单介绍一下日志工具,对以后的开发非常有用 1.4.1 使用日志工具 Log Log 日志工具类提供了 5 个方法来供我们打印信息(级别逐渐提高) Log.v(): ...

  4. BayaiM__ORACLE之ASM概念 --V 1.0.0

    BayaiM__ORACLE之ASM概念                                --V 1.0.0 -------------------------------------- ...

  5. Python—文件读写操作

    初识文件操作 使用open()函数打开一个文件,获取到文件句柄,然后通过文件句柄就可以进行各种各样的操作了,根据打开文件的方式不同能够执行的操作也会有相应的差异. 打开文件的方式: r, w, a, ...

  6. [视频教程] 如何在Linux深度系统deepin下安装docker

    笔记: 安装docker的命令 curl -sSL https://get.docker.com/ | sh service docker start 排查错误的命令 strace 视频地址在此:ht ...

  7. Git入门基础教程和SourceTree应用

    目录 一.Git的安装 1.1 图形化界面 1.2 命令行界面 二.本地仓库的创建与提交 2.1 图形化界面 2.1.1 首先在电脑上有一个空白目录 2.1.2 打开SourceTree 2.1.3 ...

  8. 2016年蓝桥杯B组C/C++决赛题解

    2016年第七届蓝桥杯B组C/C++决赛题解 2016年蓝桥杯B组C/C++决赛题目(不含答案) 1.一步之遥 枚举解方程,或者套模板解线性方程 #include<bits/stdc++.h&g ...

  9. ioctl操作

    在本书中有两个地方都对这个函数进行了介绍,其实还有很多地方需要这个函数.ioclt函数传统上一直作为纳西而不适合归入其他精细定义类别的特性的系统接口.网络程序(特别是服务器程序)经常在程序启动执行后使 ...

  10. LeetCode 动态规划

    动态规划:适用于子问题不是独立的情况,也就是各子问题包含子子问题,若用分治算法,则会做很多不必要的工作,重复的求解子问题,动态规划对每个子子问题,只求解一次将其结果保存在一张表中,从而避免重复计算. ...