JS plain text box to set the default prompt

There HTML5 new feature called placeholder, is generally used to describe an expected value of the input fields for text, search, password and other types of input and textarea. Examples are as follows:

<input type="text" placeholder="请输入文本"><br>
<input type="search" placeholder="请输入查询关键字"><br>
<input type="password" placeholder="请输入密码"><br>
<textarea placeholder="请输入描述"></textarea>

For users, placeholder is text box, enter the message, often a brief description of the expected value or expected format. The prompt is displayed in the text box, after the user starts typing, the prompt will disappear before the user input, which displays the contents of the text box is entered by the user. If the text box is left blank, the prompt will be displayed again.

Unfortunately, however, the early years there are a lot of IE9 and earlier versions of IE users, these browsers do not support the placeholder attribute. I had never been seen doing the project, often need to simulate the JS placeholder, in order to achieve a similar effect. Codes are as follows:

<!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>

This link : http://www.cnblogs.com/hanzongze/p/js-self-placeholder.html
Copyright Notice : This article blog blogger garden Hanzong Ze original author retains authorship! Welcomed the adoption reprint, deduction or other mode of transmission to use this article, but must give the author bylines and links in the apparent position of the paper! Personal blog, limited capacity, if inappropriate, please criticism and thank you!

Guess you like

Origin www.cnblogs.com/hanzongze/p/js-self-placeholder.html