Как заставить два поля ввода реагировать на одно и то же нажатие клавиши ввода?

Question

У меня есть следующий код:

<div>
    <label style="font-size: 14px">Start Time: </label> <input #StartTime id="Stime" type="time" value="09:00" (keyup.enter)="function1(name2.value)"/><br>
    <label style="font-size: 14px">End Time: </label><input #EndTime id="Etime" type="time" style="margin:10px" value="getCurrentTime()" (keyup.enter)="function1(name1.value)"/>
</div>

Я хочу, чтобы пользователь вставил два значения, а затем при вводе хочу, чтобы оба значения были записаны. теперь я должен ввести время и нажать клавишу ввода, затем ввести второе значение, а затем снова нажать клавишу ввода.

Answer 1

свяжите прослушиватель keyup с документом, а затем проверьте, является ли он клавишей ввода, если да, получите значения и выполните то, что вам нужно, с помощью.

Здесь в примере я просто регистрирую это.
А также, вы можете вставить некоторые проверки перед тем, как показывать / использовать значения, например, проверять, не являются ли оба раза пустыми.

Пожалуйста, посмотрите, нужно ли вам это, и скажите мне, если нужно внести некоторые изменения.

document.onkeyup = function(ev){
  if (ev.keyCode == 13){
    //YOU CAN INSERT VALIDATIONS HERE
    var startTime = document.getElementById('Stime').value;
    var endTime = document.getElementById('Etime').value;
    console.log("Start: " + startTime + " | End: " + endTime);
  }
}

<div>
    <label style="font-size: 14px">Start Time: </label> <input id="Stime" type="time" value="09:00" (keyup.enter)="function1(name2.value)"/><br>
    <label style="font-size: 14px">End Time: </label><input id="Etime" type="time" style="margin:10px" value="getCurrentTime()" (keyup.enter)="function1(name1.value)"/>
</div>

Answer 2

Если вы также хотите обновить время, то вы также должны прослушать событие keyup.

document.onkeyup = function(ev){
  // for pressing enter or keyup event
  if (ev.keyCode == 13 || ev.keyCode == 38){ 
    var startTime = document.getElementById('Stime').value;
    var endTime = document.getElementById('Etime').value;
    console.log("Start: " + startTime + " \nEnd: " + endTime);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <label style="font-size: 14px">Start Time: </label> <input #StartTime id="Stime" type="time" value="09:00" (keyup.enter)="function1(name2.value)"/><br>
    <label style="font-size: 14px">End Time: </label><input #EndTime id="Etime" type="time" style="margin:10px" value="getCurrentTime()" (keyup.enter)="function1(name1.value)"/>
</div>

Answer 3

function onClickMe()
{
    var newValue = $("#box").val();
    var startvalue = $("#Stime").val();
    if(startvalue != null and startvalue != "")
    {
        $("#Stime").val(newValue);
    }
    else
    {
        $("#Etime").val(newValue);
    }
}