подсчитайте символы в поле ввода, а затем отправьте

Я хочу сделать «NumPad», где я могу ввести 4-значный код клавиши в поле ввода. После того, как я нажимаю четыре кнопки, нажимается кнопка отправки. Я нашел несколько фрагментов кода, и это сработало, если я использую клавиатуру. Вот как далеко я зашел:

function addNum(num){
    document.getElementById('login').value += num;
}
$('#login').keyup(function(){
    if(this.value.length == 4){
        $('#enter').click();
    }
});
#numpad {
  width: 200px;
}

.row {
  width: 100%;
}

.number {
  min-width: 26%;
  height: 60px;
  float: left;
  border: 1px solid;
  margin: 10px;
  vertical-align: middle;
  display: block;
  font-size: 2em;
  padding-top: 8px;
  padding-left: 30px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}

a:hover .number {
  background: black;
  color: white;
}
<form action="action.php" method="post" name="loginform" id="loginform">
  <input type="password" class="form-control" name="login" id="login">
  <input type="submit" id="enter" value="Submit">
</form>
<div id="numpad">
  <div class="row">
    <a href="#" onClick="addNum('1');"><div class="number">1</div></a>
    <a href="#" onClick="addNum('2'); return false"><div class="number">2</div></a>
    <a href="#" onClick="addNum('3'); return false"><div class="number">3</div></a>
  </div>
  <div class="row">
    <a href="#" onClick="addNum('4'); return false"><div class="number">4</div></a>
    <a href="#" onClick="addNum('5'); return false"><div class="number">5</div></a>
    <a href="#" onClick="addNum('6'); return false"><div class="number">6</div></a>
  </div><div class="row">
    <a href="#" onClick="addNum('7'); return false"><div class="number">7</div></a>
    <a href="#" onClick="addNum('8'); return false"><div class="number">8</div></a>
    <a href="#" onClick="addNum('9'); return false"><div class="number">9</div></a>
  </div>
</div>


javascript input jquery onclick numpad
person Daniel    schedule 13.04.2016    source источник
comment
Вы забыли включить jQuery во фрагмент стека. Есть выпадающее меню для выбора jQuery.   -  person Sebastian Simon    schedule 13.04.2016
comment
Попробуйте .change() вместо .keyup().   -  person Lewis    schedule 13.04.2016
comment
Альтернативой может быть подключение к событию change, и если значение представляет собой 4-значное число, форма будет отправлена. RegEx для идентификации 4-значного числа просто: ^\d{4}$   -  person Ted Nyberg    schedule 13.04.2016
comment
проверьте этот ответ для лучшего опыта, а также эту скрипку   -  person Daniel Almeida    schedule 13.04.2016

Ответы (2)


arrow_upward
6
arrow_downward

Добавьте чек отправки в функцию addNum():

function addNum(num)
{
    document.getElementById('login').value += num;
    if((document.getElementById('login').value.length == 4) && document.getElementById('login').value.match(/^\d{4}$/))
    {
        alert("Form Submitted");
        document.forms["loginform"].submit();
    }
}
$('#login').keyup(function() {
    if((this.value.length == 4) && document.getElementById('login').value.match(/^\d{4}$/))
    {
        alert("Form Submitted");
        document.forms["loginform"].submit();
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="action.php" method="post" name="loginform" id="loginform">
  <input type="password" class="form-control" name="login" id="login">
  <input type="submit" id="enter" value="Submit">
</form>
<div id="numpad">
  <div class="row">
    <a href="#" onClick="addNum('1');"><div class="number">1</div></a>
    <a href="#" onClick="addNum('2');"><div class="number">2</div></a>
    <a href="#" onClick="addNum('3');"><div class="number">3</div></a>
  </div>
  <div class="row">
    <a href="#" onClick="addNum('4');"><div class="number">4</div></a>
    <a href="#" onClick="addNum('5');"><div class="number">5</div></a>
    <a href="#" onClick="addNum('6');"><div class="number">6</div></a>
  </div><div class="row">
    <a href="#" onClick="addNum('7');"><div class="number">7</div></a>
    <a href="#" onClick="addNum('8');"><div class="number">8</div></a>
    <a href="#" onClick="addNum('9');"><div class="number">9</div></a>
  </div>
</div>

Вы можете проверить, что это действительно 4-значное число, используя регулярное выражение:

document.getElementById('login').value.match(/^\d{4}$)

Отправка формы здесь заблокирована, поэтому я поставил предупреждение в...

person brso05    schedule 13.04.2016
comment
Я думаю, что сопоставление с регулярным выражением ^\d{4}$ сделало бы это более надежным, в отличие от простой проверки, имеет ли значение длину 4 символа. - person Ted Nyberg; 13.04.2016
comment
@brso05 +1 Моя ошибка, это научит меня не читать. Я удалю свои комментарии, они бессмысленны. - person Lewis; 13.04.2016
comment
@Daniel Изначально у меня было неправильное regex ... У меня было d{4} вместо ^\d{4}$. Сейчас он обновлен и должен работать. - person brso05; 13.04.2016

arrow_upward
3
arrow_downward

Вы можете немного почистить это, заменив встроенные события кликов слушателем:

$(function(){
    $('#numpad a').on("click",function(e){//listen for clicks on the numpad elements
        e.preventDefault();//don't follow the link
        $('#login').val($('#login').val()+$(this).text()).change();//append the value
    });
    $('#login').on("change keyup",function(){//on change or keyup
        if($(this).val().length == 4){//if the val is 4 chars long
            //$('#loginform').submit();//trigger submission
            $('#enter').click();//or click the submit button if you dont want to bypass the browsers native validation
        }
    });
    
    $('#loginform').on("submit",function(e){//on submit            
        if($(this)[0].checkValidity()){//if valid
          e.preventDefault();//stop submission for this demo only (remove when live)
          alert("submitted!");//do an alert (demo only, remove when live)
        } else {
          e.preventDefault();//prevent submission
          alert("Invalid!");//do an alert
        }
        $('#login').val("");//reset the input
    });
});
#numpad {
  width: 250px;
  -webkit-user-select: none; /* Chrome/Safari */        
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
}
#numpad a {
  width: 60px;
  line-height: 60px;
  display:inline-block;
  border: 1px solid;
  margin: 10px;
  vertical-align: middle;
  font-size: 2em;
  text-align:center;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}
#numpad a:hover {
  background: black;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="action.php" method="post" name="loginform" id="loginform">
  <input type="password" class="form-control" name="login" id="login" required="required" pattern="[0-9]{4}" title="4 numbers only" maxlength="4" />
  <input type="submit" id="enter" value="Submit" />
</form>
<div id="numpad"><a>1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a><a>7</a><a>8</a><a>9</a><a>0</a></div>

person Moob    schedule 13.04.2016