Question

我有一个当前与输入一起使用的功能，以防止客户输入 P.O.框到地址字段。有效的输入有一个内联onKeyPress事件，但我需要运行该函数的输入没有（我无法访问它）。

我的问题是如何合并正确的事件监听器，以便我的函数在这个无法访问的输入上运行？

function killPObox(id) {
  var idValue = document.getElementById('v65-onepage-shipaddr1').value;	
  if (id == 'v65-onepage-shipaddr1') {
    function runVal() {
      if (idValue.substr(0,4).toUpperCase() === "PO B" || idValue.substr(0,5) === "P.O. ") {
        alert("USA Light cannot ship to P.O. Boxes. Please enter a street address.");
      }
    }
    setInterval(runVal(),1);
  }
}

<!-- Practice input that works -->
1. <input type="text" class="quantity" name="v65-onepage-shipaddr1" id="v65-onepage-shipaddr1" onKeyPress="killPObox(this.name)">	 
<br>
<br>
<!-- Actual input that I need to hook into, cannot edit -->
2. <input type="text" size="25" maxlength="75" name="ShipAddress1" id="v65-onepage-shipaddr1" value="" style="" onkeydown="">

Answer 1

您可以使用addEventListener()方法，如下所示：

document.getElementById('v65-onepage-shipaddr2').addEventListener('keypress', killPObox('v65-onepage-shipaddr2'));

我认为您的第一个输入错误地将this.name作为参数传递给killPObox()函数。你应该通过this.id吗？另外，您可能希望将'v65-onepage-shipaddr1'函数中的killPObox()替换为id，以使用传递给函数的参数。

Answer 2

我确定你已经解决了这个问题，但由于这仍然没有答案（我偶然发现），我将为未来的访问者添加解决方案。

使用正确的事件
首先，onKeyPress实际上会在输入元素中注册键入的字符之前触发。因此，如果用户键入abc而您执行onKeyPress="alert(this.value)"，则会提醒ab。一个更好的选择是onKeyUp，因为这也会得到最后一个打字的字符。

正确使用活动
接下来，events - 您的选项是：

//inline, not considered "best practice"
<input type="text" name="myinput" id="myinput" onKeyUp="killPObox(this)"/>

//same event as above, but in pure js
document.getElementById('myinput').onkeyup = function (e) {
    killPObox(e.target);
};

//or attach an eventListener
document.getElementById('myinput').addEventListener('keyup', function (e) {
    killPObox(e.target)
});

所有这些都适用于大多数浏览器。我会建议替代3，或者如果你需要IE8支持，替代2。

JavaScript，简化
您的函数killPObox()应该看起来像这样（使用上述事件之一）：

function killPObox(el) {
    if (el.id == 'v65-onepage-shipaddr1' || el.id == 'v65-onepage-shipaddr2') {
        if (el.value.substr(0, 4).toUpperCase() === "PO B" || el.value.substr(0, 5) === "P.O. ") {
            alert("USA Light cannot ship to P.O. Boxes. Please enter a street address.");
        }
    }
}

最后但并非最不重要......
最后，使用事件绑定时非常重要的一部分，您需要使用window.onload()。这是为了确保在运行任何代码之前加载要绑定的脚本和元素。

window.onload = function () {
    // my binds, events and calls here
};

所有三个事件的实际工作示例：

＆＃13;

function killPObox(el) {
    if (el.id == 'v65-onepage-shipaddr0' || el.id == 'v65-onepage-shipaddr1' || el.id == 'v65-onepage-shipaddr2') {
        if (el.value.substr(0, 4).toUpperCase() === "PO B" || el.value.substr(0, 5) === "P.O. ") {
            alert("USA Light cannot ship to P.O. Boxes. Please enter a street address.");
        }
    }
}
window.onload = function () {
    document.getElementById('v65-onepage-shipaddr1').onkeyup = function (e) {
        killPObox(e.target);
    };
    document.getElementById('v65-onepage-shipaddr2').addEventListener('keyup', function (e) {
        killPObox(e.target)
    });
};

＆＃13;

"PO B" or "P.O. " will trigger the alert in all boxes:<br><br>
0. <input type="text" class="quantity" name="v65-onepage-shipaddr0" id="v65-onepage-shipaddr0" onKeyUp="killPObox(this)" /> 
<br/><br/>
1. <input type="text" class="quantity" name="v65-onepage-shipaddr1" id="v65-onepage-shipaddr1" />
<br/><br/>
2. <input type="text" class="quantity" name="v65-onepage-shipaddr2" id="v65-onepage-shipaddr2" />

＆＃13;

如何在JavaScript中进行自定义验证

2 个答案: