如何将元素附加到 div onkeypress 函数

Question

我有一个只允许输入字母字符的功能，如下所示。当此函数触发时，我想将元素附加到 div

function onlyAlphabets(event) {
  var char = event.which;
  if (char > 31 && char != 32 && (char < 65 || char > 90) && (char < 97 || char > 122)) {

    console.log('only alphebets are allowed');
    console.log($(this).val());
    var div = $(this).closest('div');

    div.append('<i class="fas fa-times"></i>');
    return false;
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 ">
  <label for="lastName">Last Name:</label>
  <input type="text" class="form-control" placeholder="Last Name" onkeypress="return onlyAlphabets(event)" id="lastName">
</div>

我试过上面的代码，但我无法实现。请帮助我。

Answer 1

问题是因为您函数中的 this 没有引用引发事件的元素，因为使用了过时的 on* 事件属性。

要解决此问题，您可以使用不显眼的事件处理程序。由于您已经在页面中包含 jQuery，您可以使用 keypress()，如下所示：

$(function() {
  $('.only-alpha').keypress(function(e) {
    var char = e.which;
    if (char > 31 && char != 32 && (char < 65 || char > 90) && (char < 97 || char > 122)) {

      console.log('only alphebets are allowed');
      var div = $(this).closest('div');

      div.append('<i class="fas fa-times">X</i>');
      return false;
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 ">
  <label for="lastName">Last Name:</label>
  <input type="text" class="form-control only-alpha" placeholder="Last Name" id="lastName">
</div>

Answer 2

按照你的代码片段，我没有使用它（因为它不引用元素），而是使用了 event.target。

请注意，按钮提供给图标。希望能帮助到你。

function onlyAlphabets(event) {
  var char = event.which;
  var div =  $(event.target).closest('div');
  if (char > 31 && char != 32 && (char < 65 || char > 90) && (char < 97 || char > 122)) {

    console.log('only alphebets are allowed');
    console.log($(div).val());
   

    if (!div.find('button').length) {
      div.append('<button>ICON</button>');
    }
    
    return false;
  } else {
  $('button').remove();
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 ">
  <label for="lastName">Last Name:</label>
  <input type="text" class="form-control" placeholder="Last Name" onkeypress="return onlyAlphabets(event)" id="lastName">
</div>

如何将元素附加到 div onkeypress 函数

how to append a element to the div onkeypress function

jquery

onkeypress