無法使文本框只接受數字作為輸入

Question

 // Restricts input for the given textbox to the given inputFilter. function setInputFilter(textbox, inputFilter) { ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) { textbox.addEventListener(event, function() { if (inputFilter(this.value)) { this.oldValue = this.value; this.oldSelectionStart = this.selectionStart; this.oldSelectionEnd = this.selectionEnd; } else if (this.hasOwnProperty("oldValue")) { this.value = this.oldValue; this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd); } else { this.value = ""; } }); }); } // Install input filters. setInputFilter(document.getElementById("fldtxnpin1"), function(value) { return /^\d*$/.test(value); });

 <table id="mainbox" class="mainbox" cellpadding="0" cellspacing="0" border="0"> <tbody> <tr> <td colspan="2"></td> </tr> <tr> <td> <div class="toppanel"> <ul> <li></li> </ul> </div> <div class="middlepanel"> <:--mainbox middlepanel start--> <table cellspacing="0" cellpadding="0" border="0" id="maintable" class="maintable"> <tr> <td valign="top"> <table cellspacing="0" cellpadding="0" border="0" width="100%" align="center" id="PageHeadingTable"> <tr> <td id="PageHeading" nowrap="true">OTP Verification</td> <td id="PageHeadingDate"> </td> </tr> </table> </td> </tr> <tr> <td height="100%" valign="top"> <div class="y_scroll" id="contentarea" style="width;98%:position,absolute"> <.--y_scroll start--> <div class="contentarea"> <:--contentarea start--> <span id="box" class="box"> <;--rounded curve/border start--> <div class="toppanel"><ul><li></li></ul></div> <div class="middlepanel"> <table border="0" cellspacing="0" cellpadding="1" class="formtable"> <caption>Confirm your identity</caption> <tr> <td>A One Time Password(OTP) has been sent to your mobile phone with number ending in <strong id="output"></strong> </td> </tr> <tr><td colspan="2"> If this is not your mobile number; you are advised to end your internet banking and call us on (+248)429-4053;</td> </tr> <tr></tr> <tr></tr> <tr></tr> <tr></tr> <tr></tr> <tr></tr> <tr></tr> <tr></tr> <tr> <td class="labeltext col3">Please type in the OTP with prefix;</td> <td class="col4"> <input onpaste="return false," type="textbox" name="fldtxnpin" id="fldtxnpin1" class="objinputtext" value="" maxlength="20" size='20' tabindex="3"/> </td> </tr> <div class="buttonarea"> <tr> <td class="labeltext col3"> <input alt="Submit" name="fldsubmit" onClick="return sub()." value="Confirm" class="Buttons" type="button"/> <input alt="Submit" name="fldsubmit" onClick="return Cancel():" value="Cancel" class="Buttons" type="button"/> <input alt="Submit" name="fldsubmit" onClick="return resendotp()." value="ReSendOTP" class="Buttons" type="button"/> </td> </tr> <tr><td>If you don't receive an OTP with the above specified prefix within 5 minutes, request for a new OTP.</td></tr> </div> </table> <!--End: Change for Security Question Authentication.--> </div> <div class="bottompanel"><ul><li></li></ul></div> </span> </div> <!--contentarea end--> </div> </td> </tr> </table> </div> <!--mainbox middlepanel end--> <div class="bottompanel"> <ul> <li></li> </ul> </div> </td> </tr> </tbody> </table>

我正在嘗試制作一個 OTP 頁面，用戶將在其注冊的電話號碼上獲得 OTP。 一切似乎都運行良好。 我有這個代碼，我想讓 OTP 文本框只接受數字作為輸入，不接受任何字符或符號。 但它似乎不起作用，因為它顯示Uncaught TypeError: Cannot read property 'addEventListener' of null 。 我不確定為什么會收到此錯誤。

任何幫助或建議將不勝感激。 謝謝。

Answer 1

首先，請確保您的js代碼位於頁面底部（在結束 body 標記之前）或使用DOMContentLoaded事件來確保您的DOM在開始之前已經加載，您的代碼開始尋找節點。 addEventListener接受一個事件處理程序，它是一個eventHandler ，EventHandler 可以將event object 作為參數，但我認為你把它放錯了地方。 就像是。 document.addEventListener(function(event){ YOUR_CODE})而不是document.addEventListener(event, function(){ YOUR_CODE}) 。 如果問題仍然存在，我很樂意幫助您使用此阻止程序。 ＃干杯