只接受数字和+符号的HTML输入

本文介绍了只接受数字和+符号的HTML输入的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我正在尝试为接受数字和加号（+）的电话号码建立自定义文本输入;所有其他字符需要被丢弃，并且不会在字段中显示。 我正在尝试使用事件处理函数（onkeydown / onkeypress）并放弃对应于其他键。但是，我无法弄清楚一个跨浏览器的方式来做到这一点。以下是我尝试过并且无法使用的方法： 使用onkeypress事件并查看事件.key 来确定哪个按键被按下：在Chrome上不起作用（请参阅 http：// caniuse的.com /的KeyboardEvent键）。是否有任何跨浏览器的解决方法？ 使用onkeycode事件并查看event.keyCode 在我们需要时不起作用按下多个键可以打印一个字符（例如，英文键盘布局需要按Shift键和=键才能显示+）。此外，它还允许显示！@＃$％& *（）等字符，因为按Shift和一个数字时会出现这些字符。 （这是在 JavaScript关键码允许数字和加上符号，但它对我没有多大帮助;）） 使用HTML模式属性：这看起来并不真实以避免人们写任何他们想要的东西。 解决方案还有另一种解决方案，你可以使用 解决方案 Array.prototype.filter（） 删除坏字符， Array.prototype.join（） 来重新创建字符串，然后将其插入到输入中。 您可以使用 oninput 事件。它在用户在< input> 字段中写入内容时执行JavaScript。 请参阅下面的示例 var inputEl = document.getElementById（'tel'）; var goodKey ='0123456789+'; var checkInputTel = function（e）{var key =（typeof e.which ==数字）？ e.which：e.keyCode; var start = this.selectionStart，end = this.selectionEnd; var filtered = this.value.split（''）。filter（filterInput）; this.value = filtered.join（）; / *防止将指针移动到错误的字符* / var move =（filterInput（String.fromCharCode（key））||（key == 0 || key == 8））？ 0：1; var inputInput = function（val）{return（goodKey.indexOf（val）> -1）;} inputEl.addEventListener（'input'，checkInputTel）;} code> < input type ='tel'id ='tel'/ > 注意：我使用input type tel在智能手机或平板电脑上显示默认数字键盘。 b b html5 输入电话号码的控件;换行符会自动从输入值中删除，但不会执行其他语法。您可以使用模式和 maxlength 等属性来限制在控件中输入的值。 ：有效和：无效根据需要应用CSS伪类。 参考： MDN < input> I am trying to build a custom text input for phone numbers that accepts only numbers and the plus (+) symbol; all other characters need to be discarded and not shown on the field.I am trying to do this using an event handler (onkeydown/onkeypress) and discarding inputs corresponding to other keys. However, I can't figure out a cross-browser way to do it. Here are the approaches that I have tried and don't work:Using the onkeypress event and looking at event.key to figure out which key was pressed: doesn't work on Chrome (see http://caniuse.com/keyboardevent-key). Is there any cross-browser workaround?Using the onkeycode event and looking at event.keyCode: does not work when we need to press multiple keys to print a character (for instance, an English keyboard layout requires pressing Shift and = to give +). Furthermore, it allows characters such as !@#$%ˆ&*() to appear, as these appear when pressing Shift and a number. (This is the approach followed in JavaScript keycode allow number and plus symbol only, but it does not help me much ;))Using the HTML pattern attribute: this does not really seem to prevent people from writing whatever they feel like.Thanks! 解决方案 There is another solution, you can use Array.prototype.filter() to remove the bad characters, and Array.prototype.join() to recreate the string before insert it into the input.You can use oninput event. It execute a JavaScript when a user writes something in an <input> field.See example belowvar inputEl = document.getElementById('tel');var goodKey = '0123456789+ ';var checkInputTel = function(e) { var key = (typeof e.which == "number") ? e.which : e.keyCode; var start = this.selectionStart, end = this.selectionEnd; var filtered = this.value.split('').filter(filterInput); this.value = filtered.join(""); /* Prevents moving the pointer for a bad character */ var move = (filterInput(String.fromCharCode(key)) || (key == 0 || key == 8)) ? 0 : 1; this.setSelectionRange(start - move, end - move);}var filterInput = function(val) { return (goodKey.indexOf(val) > -1);}inputEl.addEventListener('input', checkInputTel);<input type='tel' id='tel' />Note : I use input type tel to show default number pad in a smartphone or a tablet. tel: html5 A control for entering a telephone number; line-breaks are automatically removed from the input value, but no other syntax is enforced. You can use attributes such as pattern and maxlength to restrict values entered in the control. The :valid and :invalid CSS pseudo-classes are applied as appropriate.Reference : MDN <input> 这篇关于只接受数字和+符号的HTML输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！