Невозможно заставить текстовое поле принимать только числа в качестве ввода - PullRequest
Новая
       71

Невозможно заставить текстовое поле принимать только числа в качестве ввода

0 голосов
/ 08 мая 2020 

// 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. Я не уверен, почему я получаю эту ошибку.

Любая помощь или предложение будут оценены. Спасибо.

1 Ответ

0 голосов
/ 08 мая 2020

Прежде всего, убедитесь, что у вас есть код js внизу страницы (перед закрывающим тегом тела) или используйте событие DOMContentLoaded, чтобы убедиться, что вы DOM были бы загружены прежде чем вы начнете, код начинает искать узел. а addEventListener принимает eventHandler, который является функцией, EventHandler может принимать объект event в качестве аргумента, но я думаю, вы его потеряли. что-то вроде. document.addEventListener(function(event){ YOUR_CODE}) вместо document.addEventListener(event, function(){ YOUR_CODE}). Буду рад помочь вам с этим блокировщиком, если проблема не исчезнет. # привет

...