我有一个只允许按如下方式输入字母字符的功能。当这个函数触发
时,我想将元素附加到该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;
}
}
&#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;
我尝试使用上面的代码,但我无法实现它。请帮帮我。
答案 0 :(得分:0)
问题在于,由于使用了过时的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;
}
});
});
&#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;
答案 1 :(得分:0)
关注你的代码段,而不是使用它(因为它没有引用该元素),我已经完成了使用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();
}
}
&#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;