Question

我有一个带占位符属性的输入文本字段。当我输入文本时，占位符会消失，但我希望在单击按钮，“清除”或文本字段为空后重新显示占位符文本。有什么办法可以实现这个目标？

以下是我在下面的代码。我试过了

document.text.value = "hello";

但是当我开始输入时，文本“hello”会保留在框中。

HTML

<input type="text" placeholder="hello">
<input type="button" value="clear" onclick(clearText)>

的Javascript

function(clearText) {
 document.text.value = " ";
}

Answer 1

当文本字段为空时，占位符将自动重新出现。

单击清除按钮时，可以使用按钮上的onclick属性并定义如下函数：

使用纯JS实现：

<script>
    function clearText() {
        // we use getElementById method to select the text input and than change its value to an empty string 
        document.getElementById("my_text").value = "";
    }        
</script>

<!-- we add an id to the text input so we can select it from clearText method -->
<input id="my_text" type="text" placeholder="hello">
<!-- we use onclick attribute to call the clearText method -->
<input type="button" value="clear" onclick="clearText();">

JSFiddle Demo

或者您可以使用jQuery：

<script>
    function clearText() {
         $("#my_text").val("");
    }        
</script>

<input id="my_text" type="text" placeholder="hello">
<input type="button" value="clear" onclick="clearText();">

JSFiddle Demo

Answer 2

最简单的方法：

＆＃13;

<input placeholder="hello" onchange="if (this.value == '') {this.placeholder = 'hello';}"
/>

＆＃13;

Answer 3

你很亲密

HTML：

<input type="text" id='theText' placeholder="hello">
<input type="button" value="clear" onclick='clearText()'>

JavaScript：

clearText = function(){
 document.getElementById('theText').value = "";
}

演示： http://jsfiddle.net/trex005/7z957rh2/

Answer 4

您的javascript语法存在多个问题，从函数声明开始到onclick事件规范结束。但是，你是在正确的方式，下面的代码可以解决问题：

<input type="text" placeholder="hello">
<input type="button" value="clear" onclick="document.querySelector('input').value=''">

但是，只有当它是文档中的唯一输入框时才会起作用。要使其与多个输入一起使用，您应该为其分配一个ID：

<input type="text" id="text1" placeholder="hello">
<input type="button" value="clear" onclick="document.querySelector('#text1').value=''">

并使用＆＃34; text2＆＃34;等等其他领域。

Answer 5

您不应忘记设置“ return false”；

document.getElementById('chatinput').onkeypress = function(){
var key = window.event.keyCode;

            if (key === 13) {

                    var text        = this.value;
                    var object      = document.getElementById('username_interface'); 
                    email           = object.email;
                    username        = object.username;
                    empty           = /^\s+$/;

//功能发送消息

                    this.value      = "";

                    return false;

            }else{
                    return true;
}}

当输入字段中没有文本时，会重新显示占位符文本

5 个答案: