Question

我有3个输入：

<label for="text1">Text 1</label>
<input type="text" class="text1" value="To clear"><br>

<label for="text2">Text 2</label>
<input type="text" class="text2" value="to select"><br>

<label for="text3">Text 3</label>
<input type="text" class="text3" value="Click in this field">

我希望当您单击text3时，它会删除text1。我做了一个功能，但是不起作用：

<script>
    function myFunction(text3) {
        document.text1.value = "";
    }   
</script>

Answer 1

执行此操作的正确方法是将事件侦听器分配给元素，在其中可以调用函数

function myFunction() {
  document.querySelector('input.text1').value = "";
}


document.querySelector('input.text3').addEventListener('focus', myFunction);

<label for="text1">Text 1</label>
<input type="text" class="text1" value="To clear"><br>

<label for="text2">Text 2</label>
<input type="text" class="text2" value="to select"><br>

<label for="text3">Text 3</label>
<input type="text" class="text3" value="Click in this field">

请确保使用DOM方法（例如querySelector，getElement(s)By...等）来选择元素。永远不要依靠其全局ID来访问元素，因为这可能会因使用的浏览器而中断。（尽管document.text1.value = "";永远不会起作用。）

Answer 2

var text1 = document.querySelector('.text1');
var text3 = document.querySelector('.text3');

text3.addEventListener('focus', myFunction);

function myFunction() {
  text1.value = '';
}

<label for="text1">Text 1</label>
<input type="text" class="text1" value="To clear"><br>

<label for="text2">Text 2</label>
<input type="text" class="text2" value="to select"><br>

<label for="text3">Text 3</label>
<input type="text" class="text3" value="Click in this field">

Answer 3

您可以使用JQuery非常轻松地做到这一点。

    $('.text3').on('focus', function() {
      $('.text1').val('');
    })

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>


    <label for="text1">Text 1</label>
    <input type="text" class="text1" value="To clear"><br>

    <label for="text2">Text 2</label>
    <input type="text" class="text2" value="to select"><br>

    <label for="text3">Text 3</label>
    <input type="text" class="text3" value="Click in this field">

如何使用javascript清除输入？

3 个答案: