焦点事件侦听器未触发不可编辑的输入
Focus event listener not firing on uneditable input
我试图让焦点事件侦听器在用户尝试输入 P.O 时触发。框入地址字段。我无法为简单的按键解决方案编辑输入。我没有收到警报,我的代码中缺少什么?
<input type="text" size="25" maxlength="75" name="ShipAddress1" id="v65-onepage-shipaddr1" value="" style="" onkeydown="">
<script type="text/javascript">
document.addEventListener("focus", 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);
}
}, true
);
</script>
我列出了一些问题(除了底部的解决方案):
1) 正如 Halcyon 提到的,killPObox(id)
函数中的 id
参数被分配给事件,因此您可以通过首先获取 target
来获取所需的值这将是你的 <input>
.
2) 正如 Barmar 提到的,事件侦听器被添加到文档中,而不是输入元素本身。
3) 正如 Halcyon 提到的,setInterval()
接受一个函数而不是函数的计算结果。
4) setInterval()
不是一个好的解决方案,因为这会 运行 你检查额外的次数。特别是当用户收到警报时,用户会不断收到警报。我们可以通过利用更合适的事件监听器来解决这个问题,比如 input
.
5) focus
事件不是一个很好听的事件。我们可以使用 input
事件来解决此问题,以监听您的 <input>
.
的值变化
下面的代码片段解决了上述问题。 运行 片段以查看它是否按照您希望的方式运行。
document.getElementById('v65-onepage-shipaddr1')
.addEventListener('input', function killPObox(e) {
var targetValue = e.target.value;
if (targetValue.substr(0, 4).toUpperCase() === "PO B" || targetValue.substr(0, 5) === "P.O. ") {
alert("USA Light cannot ship to P.O. Boxes. Please enter a street address.");
}
}, true);
<input type="text" size="25" maxlength="75" name="ShipAddress1" id="v65-onepage-shipaddr1">
我试图让焦点事件侦听器在用户尝试输入 P.O 时触发。框入地址字段。我无法为简单的按键解决方案编辑输入。我没有收到警报,我的代码中缺少什么?
<input type="text" size="25" maxlength="75" name="ShipAddress1" id="v65-onepage-shipaddr1" value="" style="" onkeydown="">
<script type="text/javascript">
document.addEventListener("focus", 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);
}
}, true
);
</script>
我列出了一些问题(除了底部的解决方案):
1) 正如 Halcyon 提到的,killPObox(id)
函数中的 id
参数被分配给事件,因此您可以通过首先获取 target
来获取所需的值这将是你的 <input>
.
2) 正如 Barmar 提到的,事件侦听器被添加到文档中,而不是输入元素本身。
3) 正如 Halcyon 提到的,setInterval()
接受一个函数而不是函数的计算结果。
4) setInterval()
不是一个好的解决方案,因为这会 运行 你检查额外的次数。特别是当用户收到警报时,用户会不断收到警报。我们可以通过利用更合适的事件监听器来解决这个问题,比如 input
.
5) focus
事件不是一个很好听的事件。我们可以使用 input
事件来解决此问题,以监听您的 <input>
.
下面的代码片段解决了上述问题。 运行 片段以查看它是否按照您希望的方式运行。
document.getElementById('v65-onepage-shipaddr1')
.addEventListener('input', function killPObox(e) {
var targetValue = e.target.value;
if (targetValue.substr(0, 4).toUpperCase() === "PO B" || targetValue.substr(0, 5) === "P.O. ") {
alert("USA Light cannot ship to P.O. Boxes. Please enter a street address.");
}
}, true);
<input type="text" size="25" maxlength="75" name="ShipAddress1" id="v65-onepage-shipaddr1">