Как добавить элемент в функцию 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>