在用户输入时自动从输入框中删除某些字符 [英] automatically delete certain characters from input box while user is typing

问题描述

我试图验证一个表单，并且我正在处理的输入框应该只包含数字。如果用户开始输入任何字母，我希望他们自动删除，显然如果他们输入数字，它不应该删除。

这是我的js：

  var defaultValue = 10; 
 $ b $（document）.ready（function（）{
 
 $（'＃donation-amount'）。keyup（function（）{
 if（$ （this）.val（））{
 $（'＃display-amount'）。text（$（this）.val（））; 
} else {
 $（'＃ （默认值）; 
 $（＃default）。addClass（'active'）; 
 $（＃btn2）。removeClass（'active'）; 
 $（＃btn3）。removeClass（'active'）; 
} 
 if（isNaN（$（this）.val（）））{
 console.log false）
} else {
 console.log（true）
} 
 
}）; 
 $（.selectvalue） .click（function（）{
 $（'＃display-amount'）。text（$（this）.val（））; 
}）; 
 
 $（ .buttons .btn）。click（function（）{
 $（。buttons .btn）。removeClass（'active'）; 
 $（this）.toggleClass（'active'） ; 
 $（'＃display-amount'）。text（$（'＃default'）。val（））; 
 
}）; 
  

以下是我的html：

 < input type =Customname =donation-amountclass =inpt-first form-controlid =donation-amountonclick =if（this.defaultValue = = this.value）this.value =''onblur =if（this.value ==''）this.value = this.defaultValuevalue =Custom> 
  

获得任何帮助！

解决方案

您可能想要利用HTML5的< input type =number> 。但是，如果这不适合你的情况或不可取，你可能想尝试使用jQuery的 keydown（）函数。

HTML

< input id =inputFieldtype =text>



jQuery c $ c> $（function（）{
$（＃inputField）。keydown（function（e）{
if（e.which！= 0& e.which！= 8&（e.which< 48 || e.which> 57））{
$（＃quantity）。html（''）。append（）;
}
}）;
}）;


这会检查触发事件的键是数字键，并在数字键分配范围内。如果触发事件的键不符合这些条件，则不会输出任何输出。但是，如果输入限定在数字范围内，它将被添加（ append（））到输入字段本身。

值得注意的是，这可以通过使用标准JavaScript来实现： window.addEventListener（'keydown'，function（e）{}）;

I am trying to validate a form and the input box I'm working on should only consist of numbers. If a user starts typing any letters I want them to automatically delete and obviously if they type numbers it shouldn't delete.

here is my js:

var defaultValue = 10; 

$(document).ready(function() {

      $('#donation-amount').keyup(function() {
      if($(this).val()) {
         $('#display-amount').text($(this).val());
    } else {
        $('#display-amount').text(defaultValue);
       $("#default").addClass('active');
       $("#btn2").removeClass('active');
       $("#btn3").removeClass('active');
    }
        if (isNaN( $(this).val() )) {
        console.log("false")
        } else {
        console.log("true")
        }

      });
     $( ".selectvalue" ).click(function() {
        $('#display-amount').text($(this).val());
     });

    $(".buttons .btn").click(function(){
        $(".buttons .btn").removeClass('active');
        $(this).toggleClass('active'); 
    });
    $('#display-amount').text($('#default').val());

});

and here is my html:

 <input type="Custom" name="donation-amount" class="inpt-first form-control" id="donation-amount" onclick="if(this.defaultValue == this.value) this.value = ''" onblur="if(this.value=='') this.value = this.defaultValue" value="Custom">

any help is appreciated!

解决方案

You may want to take advantage of HTML5's <input type="number">. However, if that doesn't work for your situation or isn't desirable you may want to try using jQuery's keydown() function.

HTML

<input id="inputField" type="text">

jQuery

$(function () {
    $("#inputField").keydown(function (e) {
        if (e.which != 0 && e.which != 8 && (e.which < 48 || e.which > 57)) {
            $("#quantity").html('').append();
        }
    });
});

This checks that keys firing the event are numeric and within the numeric keys assignment range. If the keys firing the event do not match these conditions then no output is given. However, if the input qualifies as within the numeric range it will be added (append()) to the input field itself.

It is worth noting that this can be achieved using standard JavaScript: window.addEventListener('keydown', function (e) {});

这篇关于在用户输入时自动从输入框中删除某些字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！