JavaScript ondblclick无法正常工作

Question

我试图双击时清除一个文本输入框（ 仅输入一个文本）。

这是HTML

</div>
<div class="form-group">
<label for="green" class="control-label green col-md-2">Green:</label>
<div class="col-md-2">
<input type="text" id="green" ondblclick="Clear();" class="form-control"/>
</div>

还有JavaScript

    function Clear()
    {    
    this.value="";
    }

似乎没有用，有人知道错在哪里吗？

Answer 1

this在这种情况下不会工作，因为它是指的窗口对象，而不是使用docuement.getElementById 。

 function Clear() { document.getElementById('green').value=""; console.log(this); // this..value=""; } 

 </div> <div class="form-group"> <label for="green" class="control-label green col-md-2">Green:</label> <div class="col-md-2"> <input type="text" id="green" ondblclick="Clear();" class="form-control"/> </div> 

或者您可以将元素传递给Clear函数，如下所示：

 function Clear(element) { element.value = ""; } 

 </div> <div class="form-group"> <label for="green" class="control-label green col-md-2">Green:</label> <div class="col-md-2"> <input type="text" id="green" ondblclick="Clear(this);" class="form-control"/> </div> 

Answer 2

您可以使用以下代码。

HTML

<div class="form-group">
<label for="green" class="control-label green col-md-2">Green:</label>
<div class="col-md-2">
  <input type="text" id="green" ondblclick="Clear(this);" class="form-control" />
</div>
</div>

JS

function Clear(x) {
  x.value = "";
}

希望这对您有所帮助。

Answer 3

尝试这个：

function Clear() {    
    var _green = document.getElementById(this.event.target.id);
    _green.value="";
}

在上面的代码中，我们使用this.event.target.id检测了被调用函数的ID。 获取ID后，使用document.getElementById()获取DOM元素并将值设置为空。

Answer 4

您需要this作为参数传递给函数：

  function Clear(that) { that.value = ""; } 

 <div class="form-group"> <label for="green" class="control-label green col-md-2">Green:</label> <div class="col-md-2"> <input type="text" id="green" ondblclick="Clear(this);" class="form-control" /> </div> </div> 

Answer 5

为了在不更改函数内部任何内容的情况下进行这项工作，您可以像这样绑定元素：

... ondblclick="Clear.call(this);" ...

在Clear()内部，您将使用this引用元素。

奖金

您也可以像这样通过事件：

... ondblclick="Clear.call(this, event);" ...

然后，您的函数将如下所示：

function Clear(event)
{
   // ...
}

另外

您还可以单独注册事件处理程序：

document.getElementById('green').addEventListener('dblclick', Clear);