Question

例如，我有一个文本输入，其值为“在此处插入文本”，如下所示：

 <input type="text" value="insert text here" />

当我点击输入的块时，“在此处插入文本”的文本将自动消失，但当用户取消在那里写东西时，文本将再次出现。

怎么做？

由于

Answer 1

使用此placeholder属性

<input type="text" placeholder="insert text here" />

Answer 2

USE占位符属性
<input name="" type="text" placeholder="place holder text here."/>

但它可能无法在旧浏览器中使用。如果您使用旧版浏览器，则应使用javascrip / jquery来处理此问题。

<input type="text" class="userName" value="Type User Name..." />


$(document).ready(function(){

    $('.userName').on('focus',function(){
    var placeHolder = $(this).val();
        if(placeHolder == "Type User Name..."){
            $(this).val("");
        }
    });
    $('.userName').on('blur',function(){
    var placeHolder = $(this).val();
        if(placeHolder == ""){
            $(this).val("Type User Name...");
        }
    });

});

请参阅deme JSFIDDLE

Answer 3

<input type="text" name="fname" placeholder="insert text here">

Answer 4

您需要使用“占位符”属性，如下所示：

 <input type="text" placeholder="insert text here" />

在字段

中键入内容时，将自动删除占位符文本

http://www.w3schools.com/tags/att_input_placeholder.asp

Answer 5

使用占位符代替值。

    <input type="text" placeholder="insert text here" />

Answer 6

您可以使用Placehoder实现此目的但你需要知道旧版本的浏览器，因为它不支持地方提升

 <input type="text" value="some text"  placeholder="insert text here"/>

对于旧版本的浏览器，您可以使用以下链接并下载js

link

Answer 7

If you want compatible in all browsers then you can use this code.
<!DOCTYPE html>
<html>
<body>

First Name: <input type="text" id="myText" placeholder="Name">

<p>Click the button to display the placeholder text of the text field.</p>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementById("myText").placeholder;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

自动删除输入值

7 个答案: