如何将元素附加到 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*event 属性，因此没有引用引发事件的元素。

若要解决此问题，可以使用不显眼的事件处理程序。由于您已经在页面中包含 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>