如何清除文本字段？

Question

我想在文本字段旁边放置一个十字按钮，单击它会清除用户输入的值。 换句话说，它清空了该字段。 请帮忙..我也想聚焦领域，但在大约 2 或 3 秒后..

Answer 1

像这样：

$('#myButton').click( function () {
    $('#myField').val('');
});

或者没有 jQuery

document.getElementById('myButton').onclick = function () {
    document.getElementById('myField').value = '';
});

Answer 2

尝试这个，

$('#button').click(function(){
  $('#inputBox').val('');
});

Answer 3

你有没有尝试过什么？ 但这应该可以（误读后编辑，见下文）：

$('#your_button').click(function() { $('#your_textbox').val(''); });

Answer 4

在 JavaScript 中：

document.getElementById('textField1').value = "";

Answer 5

假设您的文本字段如下所示：

<input type="text" id="myText"></input>

你的按钮看起来像这样：

<input type="button" id="myButton"></input>

你只需要在 javascript 中做到这一点：

<script type="text/javascript">
    var myButton = document.getElementById('myButton');
    myButton.addEventListener("click", function () { 
        document.getElementById('myText').value = ''; 
    }, false);
</script>

如果您使用 jQuery，那就更简单了：

<script type="text/javascript">
   $('#myButton').click(function() {
      $('#myText').val('');
   });
</script>

Answer 6

好吧，学会将您的任务分解成更小的任务，一切都会变得容易得多。 例如，在这里，您有 2 个任务：

1) 在输入附近放置一个“X”按钮。 这是通过 CSS 和 HTML 实现的。 您的 HTML 可能如下所示：

然后你应该将你的图像与你的输入对齐

2) 实际擦除。 在 jQuery 中：

$("#x_button").click( function() {
  $("#input_id").val( "" );    
});

但这是 Web 开发的真正基础，所以你真的应该考虑阅读一些关于它的书。

Answer 7

你可以用 html5 值来做。

<input type="text" placeholder="Your text here">

Answer 8

这是一个示例：

网址：

<input type="text" id="txtText" value="test value" />
<input type="button" id="btnClear" value="Clear" />

javascript:

$(document).ready(function () {
            $("#btnClear").click(ClearText);
        });

        function ClearText() {
            $("#txtText").val("");
        }