Verhindern, dass ungültige Zeichen in Felder eingegeben werden: Eine umfassende Anleitung

Question

Onkeydown, ich führe das folgende JavaScript aus:

function ThisOnKeyDown(el) {
   if (el.title == 'textonly') {
       !(/^[A-Za-zÑñ-s]*$/i).test(el.value) ? el.value = el.value.replace(/[^A-Za-zÑñ-s]/ig, '') : Null;
   }
   if (el.title == 'numbersonly') {
       !(/^[0-9]*$/i).test(el.value) ? el.value = el.value.replace(/[^0-9]/ig, '') : null;
   }
   if (el.title == 'textandnumbers') {
       !(/^[A-Za-zÑñ0-9-s]*$/i).test(el.value) ? el.value = el.value.replace(/[^A-Za-zÑñ0-9-s ]/ig, ''): null;
   }
}

Jedem Eingabefeld auf der Seite wird eines dieser drei Titelattribute zugewiesen. Der Code funktioniert, solange die ungültigen Zeichen korrekt entfernt werden, jedoch nicht, bis das nächste Zeichen eingegeben wird. Ich würde gerne eine Möglichkeit finden, ungültige Eingaben einfach abzulehnen. Vielen Dank für Ihre Hilfe!

Bearbeiten: Ich erstelle Ereignisse global. Das habe ich gemacht:

function Globalization() {
      var inputs = document.getElementsByTagName('input');
      for (i = 0; i < inputs.length; i++) {
          inputs[i].onfocus = createEventHandler(
              ThisOnFocus, Eingaben[i]);
          inputs[i].onblur = createEventHandler(
              ThisOnBlur, Eingaben[i]);
          inputs[i].onkeydown = createEventHandler(
              ThisOnKeyDown, Eingaben[i]);
          inputs[i].onkeyup = createEventHandler(
              ThisOnKeyUp, Eingaben[i]);
      }
  }

globalisierung()runbody.onload

Ein typisches Eingabefeld hat also HTML und keine Funktionsaufrufe wie diesen:

<input id="AppFirstName" style="width: 150px;" type="text" maxlength="30" title="textonly"/> ;

Answer 1

上面的代码确实说明了这一点——只允许数字。您可以通过添加异常来修改它，例如像这样的 BACKSPACE

Answer 2

为了防止它首先被设置，您可以在 keydown 事件处理程序上返回 false，从而防止事件进一步传播。

我使用 jQuery 编写了下面的示例，但是您可以在传统绑定时使用相同的函数。

尽管在服务器端验证也很重要，但为了用户友好性，客户端验证也很重要。

$("input.number-only").bind({
    keydown: function(e) {
        if (e.shiftKey === true ) {
            if (e.which == 9) {
                return true;
            }
            return false;
        }
        if (e.which > 57) {
            return false;
        }
        if (e.which==32) {
            return false;
        }
        return true;
    }
});