表单文本字段仅接受数字和空格答案

【问题标题】：Form Text Field to ONLY accept numbers and whitespace表单文本字段仅接受数字和空格
【发布时间】：2013-07-05 18:31:18
【问题描述】：

我的网站上有一个基本查询表，我希望其中一个字段只接受数字和键盘空格（空格）。

目前，电话号码字段仅接受以下号码：

if(isNaN(form.phone.value)) 
{
alert('Due to SPAM this field will only accept numbers');
form.phone.focus();
return false;
}

当我测试表单并使用键盘空间时，会显示错误消息。我需要这个字段来接受数字和空格。我假设人们在输入完整的电话号码（包括国家/地区代码）时会使用空格。

【问题讨论】：

您需要使用正则表达式来处理空格。
谢谢，你能告诉我如何在我提供的代码中加入正则表达式来处理空格吗？我是 Javascript 新手！谢谢

标签： javascript regex forms whitespace textfield

【解决方案1】：

你可以这样做

'use strict';

function addEvent(elem, event, fn) {
  if (typeof elem === 'string') {
    elem = document.getElementById(elem);
  }

  function listenHandler(e) {
    var ret = fn.apply(null, arguments);
    if (ret === false) {
      e.stopPropagation();
      e.preventDefault();
    }

    return ret;
  }

  function attachHandler() {
    window.event.target = window.event.srcElement;
    var ret = fn.call(elem, window.event);
    if (ret === false) {
      window.event.returnValue = false;
      window.event.cancelBubble = true;
    }

    return ret;
  }

  if (elem.addEventListener) {
    elem.addEventListener(event, listenHandler, false);
  } else {
    elem.attachEvent('on' + event, attachHandler);
  }
}

var keys = ' 0123456789';

function verify(e) {
  var key = String.fromCharCode(e.keyCode || e.charCode);
  return keys.indexOf(key) !== -1;
}

addEvent('test', 'keypress', verify);

&lt;input id="test" type="text" /&gt;

更新：由于现在一切都支持EventTarget.addEventListener，因此您不需要所有额外的样板文件。以上可以写成这样。

'use strict';

const element = document.getElementById('test');
const keys = ' 0123456789';
element.addEventListener('keypress', (e) => {
  if (keys.includes(e.key) === false) {
    e.stopPropagation();
    e.preventDefault();
  }
}, false);

&lt;input id="test" type="text" /&gt;

信息：

keypress

KeyboardEvent

Event.stopPropagation

Event.preventDefault

【讨论】：

【解决方案2】：

使用 html5 输入 type="tel" 属性 (http://www.w3schools.com/tags/tag_input.asp)。

【讨论】：