HTML文本输入仅允许数字输入

2020/09/20 00:01 · javascript ·  · 0评论

有没有一种快速的方法来将HTML文本输入(<input type=text />)设置为仅允许数字键输入(加'。')?

注意:这是更新的答案。下面的注释指的是一个旧版本,其中包含了密钥代码。

的JavaScript

在JSFiddle上尝试一下

您可以<input>使用以下setInputFilter功能过滤文本的输入值(支持复制+粘贴,拖动+拖放,键盘快捷键,上下文菜单操作,不可键入的键,插入标记的位置,不同的键盘布局以及IE 9以后的所有浏览器) :

// Restricts input for the given textbox to the given inputFilter function.
function setInputFilter(textbox, inputFilter) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
    textbox.addEventListener(event, function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        this.value = "";
      }
    });
  });
}

现在,您可以使用该setInputFilter功能来安装输入过滤器:

setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\d*$/.test(value); // Allow digits and '.' only, using a RegExp
});

有关更多输入过滤器示例,请参见JSFiddle演示另请注意,您仍然必须进行服务器端验证!

打字稿

这是此的TypeScript版本。

function setInputFilter(textbox: Element, inputFilter: (value: string) => boolean): void {
    ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
        textbox.addEventListener(event, function(this: (HTMLInputElement | HTMLTextAreaElement) & {oldValue: string; oldSelectionStart: number | null, oldSelectionEnd: number | null}) {
            if (inputFilter(this.value)) {
                this.oldValue = this.value;
                this.oldSelectionStart = this.selectionStart;
                this.oldSelectionEnd = this.selectionEnd;
            } else if (Object.prototype.hasOwnProperty.call(this, 'oldValue')) {
                this.value = this.oldValue;
                if (this.oldSelectionStart !== null &&
                    this.oldSelectionEnd !== null) {
                    this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
                }
            } else {
                this.value = "";
            }
        });
    });
}

jQuery的

还有一个jQuery版本。看到这个答案

HTML 5

HTML 5提供了一个本机解决方案<input type="number">(请参见规范),但是请注意,浏览器支持有所不同:

  • 大多数浏览器仅在提交表单时才验证输入,而在键入时不验证。
  • 大多数移动浏览器不支持stepminmax属性。
  • Chrome(版本71.0.3578.98)仍然允许用户输入字符eE输入字段。也看到这个问题
  • Firefox(版本64.0)和Edge(EdgeHTML版本17.17134)仍然允许用户在字段中输入任何文本。

在w3schools.com上尝试一下

使用此DOM

<input type='text' onkeypress='validate(event)' />

而这个脚本

function validate(evt) {
  var theEvent = evt || window.event;

  // Handle paste
  if (theEvent.type === 'paste') {
      key = event.clipboardData.getData('text/plain');
  } else {
  // Handle key press
      var key = theEvent.keyCode || theEvent.which;
      key = String.fromCharCode(key);
  }
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}

我一直在努力寻找这个问题的好答案,我们非常需要它<input type="number",但除此之外,这两种是我想出的最简洁的方法:

<input type="text" 
       onkeyup="this.value=this.value.replace(/[^\d]/,'')">

如果您不喜欢在删除之前一秒钟显示的不可接受字符,可以使用以下方法。请注意众多其他条件,这是为了避免禁用各种导航和热键。如果有人知道如何压缩它,请告诉我们!

<input type="text" 
onkeydown="return ( event.ctrlKey || event.altKey 
                    || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) 
                    || (95<event.keyCode && event.keyCode<106)
                    || (event.keyCode==8) || (event.keyCode==9) 
                    || (event.keyCode>34 && event.keyCode<40) 
                    || (event.keyCode==46) )">

这是一个简单的值,它只允许一个小数,但不能再多:

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />

还有一个例子,对我来说非常有用:

function validateNumber(event) {
    var key = window.event ? event.keyCode : event.which;
    if (event.keyCode === 8 || event.keyCode === 46) {
        return true;
    } else if ( key < 48 || key > 57 ) {
        return false;
    } else {
        return true;
    }
};

同时附加到按键事件

$(document).ready(function(){
    $('[id^=edit]').keypress(validateNumber);
});

和HTML:

<input type="input" id="edit1" value="0" size="5" maxlength="5" />

这是一个jsFiddle示例

此处的大多数答案都具有使用键事件的弱点

许多答案会限制您使用键盘宏进行文本选择,复制+粘贴以及更多不良行为的能力,其他答案似乎取决于特定的jQuery插件,这些插件会用机枪杀死苍蝇。

无论输入机制如何(击键,复制+粘贴,右键单击复制+粘贴,语音转文本等),这种简单的解决方案似乎都对我跨平台最有效。所有文本选择键盘宏仍然可以使用,甚至会限制通过脚本设置非数字值的能力。

function forceNumeric(){
    var $input = $(this);
    $input.val($input.val().replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input[type="number"]', forceNumeric);

HTML5具有<input type=number>,它听起来很适合您。当前,只有Opera本身支持它,但是有一个项目具有JavaScript实现。

HTML5支持正则表达式,因此您可以使用以下命令:

<input id="numbersOnly" pattern="[0-9.]+" type="text">

警告:某些浏览器尚不支持此功能。

我选择使用这里提到的两个答案的组合,即

<input type="number" />

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    return !(charCode > 31 && (charCode < 48 || charCode > 57));
}

<input type="text" onkeypress="return isNumberKey(event);">

的JavaScript

function validateNumber(evt) {
    var e = evt || window.event;
    var key = e.keyCode || e.which;

    if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
    // numbers   
    key >= 48 && key <= 57 ||
    // Numeric keypad
    key >= 96 && key <= 105 ||
    // Backspace and Tab and Enter
    key == 8 || key == 9 || key == 13 ||
    // Home and End
    key == 35 || key == 36 ||
    // left and right arrows
    key == 37 || key == 39 ||
    // Del and Ins
    key == 46 || key == 45) {
        // input is VALID
    }
    else {
        // input is INVALID
        e.returnValue = false;
        if (e.preventDefault) e.preventDefault();
    }
}

另外,您可以添加逗号,句点和减号(,.-)

  // comma, period and minus, . on keypad
  key == 190 || key == 188 || key == 109 || key == 110 ||

的HTML

<input type="text" onkeydown="validateNumber(event);"/ >

很简单....

//在JavaScript函数中(可以使用HTML或PHP)。

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

在表单输入中:

<input type=text name=form_number size=20 maxlength=12 onkeypress='return isNumberKey(event)'>

最大输入 (以上允许输入12位数字)

2个解决方案:

使用表单验证器(例如,使用jQuery验证插件

使用正则表达式在输入字段的onblur事件(即用户离开字段时)期间进行检查:

<script type="text/javascript">
function testField(field) {
    var regExpr = new RegExp("^\d*\.?\d*$");
    if (!regExpr.test(field.value)) {
      // Case of error
      field.value = "";
    }
}

</script>

<input type="text" ... onblur="testField(this);"/>

一种比较安全的方法是检查输入的值,而不是劫持按键并尝试过滤keyCode。

这样,用户可以自由使用键盘箭头,修饰键,退格键,删除,使用非标准键盘,使用鼠标粘贴,使用拖放文本,甚至使用辅助功能输入。

以下脚本允许使用正数和负数

1
10
100.0
100.01
-1
-1.0
-10.00
1.0.0 //not allowed

var input = document.getElementById('number');
input.onkeyup = input.onchange = enforceFloat;

//enforce that only a float can be inputed
function enforceFloat() {
  var valid = /^\-?\d+\.\d*$|^\-?[\d]*$/;
  var number = /\-\d+\.\d*|\-[\d]*|[\d]+\.[\d]*|[\d]+/;
  if (!valid.test(this.value)) {
    var n = this.value.match(number);
    this.value = n ? n[0] : '';
  }
}
<input id="number" value="-3.1415" placeholder="Type a number" autofocus>

编辑:我删除了我的旧答案,因为我认为它已经过时了。

您可以为此使用模式:

<input id="numbers" pattern="[0-9.]+" type="number">

在这里,您可以看到完整的移动网站界面提示

请找到以下提到的解决方案。在此用户可以可以只输入numeric值,而且用户不能能够copypastedragdrop输入。

允许的字符

0,1,2,3,4,5,6,7,8,9

不允许字符和事件中的字符

  • 字母值
  • 特殊的角色
  • 复制
  • 拖动
  • 下降
$(document).ready(function() {
  $('#number').bind("cut copy paste drag drop", function(e) {
      e.preventDefault();
  });     
});
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" class="form-control" name="number" id="number" onkeypress="return isNumberKey(event)" placeholder="Enter Numeric value only">

让我知道是否有效。

再举一个例子,你可以在输入字段中添加唯一号码,不能

<input type="text" class="form-control" id="phone" name="phone" placeholder="PHONE" spellcheck="false" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">

如果要向设备(例如手机)建议字母或数字之间的字符,则可以使用<input type="number">

使用jQuery和replace()的简短实现,而不是查看event.keyCode或event。哪个:

$('input.numeric').live('keyup', function(e) {
  $(this).val($(this).val().replace(/[^0-9]/g, ''));
});

键入的字母会瞬间出现,并且CTRL / CMD + A似乎只有很小的副作用。

input type="number" 是HTML5属性。

在其他情况下,这将帮助您:

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<input type="number" name="somecode" onkeypress="return isNumberKey(event)"/>

JavaScript代码:

function validate(evt)
{
    if(evt.keyCode!=8)
    {
        var theEvent = evt || window.event;
        var key = theEvent.keyCode || theEvent.which;
        key = String.fromCharCode(key);
        var regex = /[0-9]|\./;
        if (!regex.test(key))
        {
            theEvent.returnValue = false;

            if (theEvent.preventDefault)
                theEvent.preventDefault();
            }
        }
    }

HTML代码:

<input type='text' name='price' value='0' onkeypress='validate(event)'/>

完美的工作原理是因为退格键代码为8,而正则表达式表达式不允许它,所以这是绕过该错误的简便方法:

只需使用type =“ number”,现在此属性在大多数浏览器中均受支持

<input type="number" maxlength="3" ng-bind="first">

解决此问题的一种简单方法是实现jQuery函数,以使用正则表达式验证文本框中键入的字符,例如:

您的html代码:

<input class="integerInput" type="text">

以及使用jQuery的js函数

$(function() {
    $('.integerInput').on('input', function() {
      this.value = this.value
        .replace(/[^\d]/g, '');// numbers and decimals only

    });
});

$(function() {
        $('.integerInput').on('input', function() {
          this.value = this.value
            .replace(/[^\d]/g, '');// numbers and decimals only
            
        });
    });
<script
			  src="https://code.jquery.com/jquery-2.2.4.min.js"
			  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
			  crossorigin="anonymous">
</script>

<input type="text" class="integerInput"/>


		

jQuery使用的另一个变体

$(".numeric").keypress(function() {
    return (/\d/.test(String.fromCharCode(event.which) ))
});

您还可以将输入值(默认情况下视为字符串)与强制为数字的自身进行比较,例如:

if(event.target.value == event.target.value * 1) {
    // returns true if input value is numeric string
}

但是,您需要将其绑定到诸如keyup等事件。

<input name="amount" type="text" value="Only number in here"/> 

<script>
    $('input[name=amount]').keyup(function(){
        $(this).val($(this).val().replace(/[^\d]/,''));
    });
</script>

我看到了一些很棒的答案,但是我喜欢它们尽可能的小而简单,所以也许有人会从中受益。我将使用javascript Number()和如下isNaN功能:

if(isNaN(Number(str))) {
   // ... Exception it is NOT a number
} else {
   // ... Do something you have a number
}

希望这可以帮助。

使用此DOM:

<input type = "text" onkeydown = "validate(event)"/>

这个脚本:

validate = function(evt)
{
    if ([8, 46, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 35, 36].indexOf(evt.keyCode || evt.which) == -1)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

...或者这个脚本,没有indexOf,使用两个for...

validate = function(evt)
{
    var CharValidate = new Array("08", "046", "039", "948", "235");
    var number_pressed = false;
    for (i = 0; i < 5; i++)
    {
        for (Ncount = 0; Ncount < parseInt(CharValidate[i].substring(0, 1)) + 1; Ncount++)
        {
            if ((evt.keyCode || evt.which) == parseInt(CharValidate[i].substring(1, CharValidate[i].lenght)) + Ncount)
            {
                number_pressed = true;
            }
        }
    }
    if (number_pressed == false)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

我使用onkeydown属性而不是onkeypress,因为onkeydown属性先于onkeypress属性被检查。问题可能出在Google Chrome浏览器中。

使用属性“ onkeypress”,TAB将无法通过google chrome上的“ preventDefault”来控制,但是使用属性“ onkeydown”,TAB将变得可控!

TAB的ASCII码=> 9

第一个脚本的代码少于第二个脚本的代码,但是,ASCII字符数组必须具有所有键。

第二个脚本比第一个脚本大得多,但是数组不需要所有键。数组每个位置的第一个数字是每个位置将被读取的次数。对于每个读数,将1递增到下一个读数。例如:


NCount = 0

48 + NCount = 48

NCount + +

48 + NCount = 49

NCount + +

...

48 + NCount = 57


如果数字键只有10(0-9)个,但是如果它们是100万个,则用所有这些键创建数组是没有意义的。

ASCII码:

  • 8 ==>(退格);
  • 46 =>(删除);
  • 37 =>(向左箭头);
  • 39 =>(向右箭头);
  • 48-57 =>(数字);
  • 36 =>(主页);
  • 35 =>(结束);

这是一个改进的功能:

function validateNumber(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  if ((key < 48 || key > 57) && !(key == 8 || key == 9 || key == 13 || key == 37 || key == 39 || key == 46) ){
    theEvent.returnValue = false;
    if (theEvent.preventDefault) theEvent.preventDefault();
  }
}

最好的方式(允许所有类型的数字-实数负数,实数正数,iinteger负数,整数正数)是:

$(input).keypress(function (evt){
    var theEvent = evt || window.event;
    var key = theEvent.keyCode || theEvent.which;
    key = String.fromCharCode( key );
    var regex = /[-\d\.]/; // dowolna liczba (+- ,.) :)
    var objRegex = /^-?\d*[\.]?\d*$/;
    var val = $(evt.target).val();
    if(!regex.test(key) || !objRegex.test(val+key) || 
            !theEvent.keyCode == 46 || !theEvent.keyCode == 8) {
        theEvent.returnValue = false;
        if(theEvent.preventDefault) theEvent.preventDefault();
    };
}); 

这是geowa4解决方案的扩展版本支持minmax属性。如果数字超出范围,将显示前一个值。

您可以在这里进行测试。

用法: <input type=text class='number' maxlength=3 min=1 max=500>

function number(e) {
var theEvent = e || window.event;
var key = theEvent.keyCode || theEvent.which;
if(key!=13&&key!=9){//allow enter and tab
  key = String.fromCharCode( key );
  var regex = /[0-9]|\./;
  if( !regex.test(key)) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
    }   
  }
}

$(document).ready(function(){
    $("input[type=text]").filter(".number,.NUMBER").on({
        "focus":function(e){
         $(e.target).data('oldValue',$(e.target).val());
            },
        "keypress":function(e){
                e.target.oldvalue = e.target.value;
                number(e);
            },
        "change":function(e){
            var t = e.target;
            var min = $(t).attr("min");
            var max = $(t).attr("max");
            var val = parseInt($(t).val(),10);          
            if( val<min || max<val)
                {
                    alert("Error!");
                    $(t).val($(t).data('oldValue'));
                }

            }       
    });     
});

如果输入是动态的,请使用以下命令:

$(document).ready(function(){
    $("body").on("focus","input[type=text].number,.NUMBER",function(e){
        $(e.target).data('oldValue',$(e.target).val());
    }); 
    $("body").on("keypress","input[type=text].number,.NUMBER",function(e){
        e.target.oldvalue = e.target.value;
        number(e);
    }); 
    $("body").on("change","input[type=text].number,.NUMBER",function(e){
        var t = e.target
        var min = $(t).attr("min");
        var max = $(t).attr("max");
        var val = parseInt($(t).val());         
        if( val<min || max<val)
            {
                alert("Error!");
                $(t).val($(t).data('oldValue'));
            }
    }); 
});
本文地址:http://javascript.askforanswer.com/htmlwenbenshurujinyunxushuzishuru.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!