Question

我有一个只允许按如下方式输入字母字符的功能。当这个函数触发

时，我想将元素附加到该div

＆＃13;

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;
  }

}

＆＃13;

<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>

＆＃13;

我尝试使用上面的代码，但我无法实现它。请帮帮我。

Answer 1

问题在于，由于使用了过时的this事件属性，函数中的on*并未引用引发事件的元素。

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

＆＃13;

$(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;
    }
  });
});

＆＃13;

<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>

＆＃13;

Answer 2

关注你的代码段，而不是使用它（因为它没有引用该元素），我已经完成了使用event.target。

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

＆＃13;

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();
  }

}

＆＃13;

<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>

＆＃13;

如何将一个元素追加到div onkeypress函数

2 个答案: