как добавить элемент в функцию div onkeypress - PullRequest
Новая
       11

как добавить элемент в функцию div onkeypress

0 голосов
/ 08 мая 2018

У меня есть функция, которая позволяет вводить только буквенные символы следующим образом. Я хочу добавить элемент к этому 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>

Я пытался использовать приведенный выше код, но я не смог этого добиться. Пожалуйста, помогите мне.

Ответы [ 2 ]

0 голосов
/ 08 мая 2018

Следуя вашему фрагменту, вместо того, чтобы использовать его (поскольку он не относится к элементу), я использовал 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>
0 голосов
/ 08 мая 2018

Проблема в том, что 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>
...