使输入适用于顺序窗体按钮

问题描述：

我有一个带有多个按钮的窗体（用于验证每个部分完整，然后使下一部分可见并根据以前的响应更改下一部分）。我还隐藏了最终提交按钮，直到最终验证完成（重新运行所有单个验证）。这样用户不能点击提交，直到所有必填字段完成。但是回车键仍然绑定到提交按钮。我查看并发现了一些事件处理程序代码，这些代码会关闭会阻止提交表单的输入键功能（我不太清楚），但我宁愿调整该代码以将输入键功能转移到每个按钮，然后最终到提交按钮本身。有任何想法吗？使输入适用于顺序窗体按钮

的示例代码，我发现，我不能做的意义：

<form> 
    <label for="age">Age:</label> 
    <input type="number" min="0" max="120" name="age" id="age"> 
    <button id="child">Child</button> 
    <button id="adult">Adult</button> 
    </form> 
    <script> 
    (function() { 
    var age = document.getElementById('age'); 
    age.addEventListener('keypress', function(event) { 
     if (event.keyCode == 13) { 
      event.preventDefault(); 
      if (age.value > 20) { 
       document.getElementById('adult').click(); 
      } else { 
       document.getElementById('child').click(); 
      } 
     } 
    }); 
    }()); 
    </script>

为了帮助我明白了一个好一点 - 你希望你的输入键绑定到整个表单中的某些按钮，具体取决于焦点所在的表单部分（缺少更好的单词），然后在成功验证后最终提交最终的提交按钮，是否正确？ – JSess

@JSess是的，我想在打开页面时输入绑定到按钮1，作为与按钮1相关的功能的一部分我想从按钮1移除绑定并将其放在按钮2上，直到它最后到达提交按钮的最终按钮。 –

答

对于每个先前提交表单按钮可以这么写：

$("#id_of_form").keypress(function(event){ 
    event.preventDefault(); 
    if(event.keyCode == 13){ 
     $("#id_of_button").click(); 
    } 
});

添加一个'event.preventDefault（）;'或表单可能过早提交 –

event.keyCode == 13是我在上面的例子中无法理解的部分，13特别指的是输入键，事件是否被按下？是否有我可以查找某些keyCodes的列表？ –

在这个q/a中寻找键码 - http://stackoverflow.com/questions/5603195/what-are-the-javascript-keycodes –

答

基于的要求，我已经拿出一个例子，我会怎么做在this fiddle

我禁用不是第一个按钮，当输入字段中有文本和用户压力在它旁边的按钮（在同一部分），或者如果用户点击进入（检查keyCode 13，就像@depperm所提到的那样），它会查看按钮是否被禁用，否则它会用输入文本并添加到值的变量中。

var $button = $('button'), 
    $form = $('form'), 
    valStr = ''; 

// on button clicks, prevent default action, and fire buttonPress function 
$button.click(function (e) { 
    e.preventDefault(); 
    buttonPress($(this).closest('.section')); 
}); 

// when user hits enter key and button is not disabled, click button 
$(".section").keyup(function (e) { 
    if (e.keyCode == 13) $(this).find('button').click($(this)); 
}); 

function buttonPress($section) { 
    var thisVal = $section.find('input').val(); 

    // if the button is not disabled for the section, and the value is not blank 
    if (!$section.find('button').attr('disabled') && thisVal !== '') { 
     valStr += (thisVal); 

     // replace this section HTML with the val string we just added to, 
     // then remove the next section's disabled attribute from button 
     // if there is no next section, then trigger a submit (or you could enable the submit button for the user to be able to click for form submit) 
     $section 
      .html('<p>' + valStr + '</p>') 
      .next('.section').length ?  $section.next().find('button').removeAttr('disabled') : $form.trigger('submit'); 
    } 
}

希望这是您迈向正确方向的一步。

**编辑，链接和语法错误在/ 1/

答

端了糖化一堆的建议，我来到这里一起伴随着一些进一步的研究，它指向。

开始了这个在我的

$(document).ready(function() { 
    $(window).keypress(function(event){ 
    if(event.keyCode == 13) { 
    $("#dadosTutor").click(); 
    event.preventDefault(); 
    return false; 
    } 
    }); 
    });

然后添加它的一部分，以我的每个验证为无效投入的头：

if (nullCheck() === 0) { 
    alert('Você ainda não tenham completado o preenchimento da tabela Dados do Tutorando. Faz favor, verifique que você respondeu a cada pergunta e submeter mais uma vez.'); 
} 
else { 
    $("#numberProcesso").show(); 
    $("#numberPatients").show(); 
    $("#patientProcesso").show(); 
    $("#dadosTutor").remove(); 
    //This is what I added 
    $(window).keypress(function(event){ 
    if(event.keyCode == 13) { 
    $("#patientProcesso").click();} 
}); 
} 
}

使输入适用于顺序窗体按钮

相关推荐