Question

我有一些开发人员预编写的代码，我必须修改，在该代码中，使用textboxe创建的指令在label中使用，并且我在该指令中添加了另一个自定义指令。所以最终呈现的HTML看起来像。

<label class="myClass">
  <div><input type="text" ng-model="someModel"></div>
  <my-custom-tag>
    <div class="customDropdown">
      dropdownBox
    </div>
  </my-custom-tag>
</label>

由于这个div.customDropdown在标签内部，每当我点击下拉列表时，该点击也会转到文本框。

所以我的问题是，有没有办法禁用聚焦输入元素的标签功能？

Answer 1

您可以使用jQuery阻止标签的单击事件的默认操作。

$('label.myClass').click(function(e) { 
    e.preventDefault();
});

Answer 2

这是在vanilla JavaScript中实现的：

Console console = System.console();
String username = console.readLine("Please enter user name : ");   
System.out.println("You entered : " + username);

document.body.addEventListener('click', function(e) {
  if(e.target.className === 'customDropdown') {
    e.preventDefault();
  }
});

document.body.addEventListener('click', function(e) {
  if(e.target.className === 'customDropdown') {
    e.preventDefault();
  }
});

Answer 3

我建议你在标签的位置使用div或span，如果你愿意，你可以在它之前或之内写它..

我知道这不简单，但你可以做到。

单击标签时禁用输入焦点

3 个答案: