Question

我有一个有css按钮的表单。

如果我点击使用鼠标提交，我可以提交表单，但如果我点击“输入”，我怎样才能提交表单？我桌面电脑上的键。

如果我点击＆＃39;输入＆＃39;密钥现在没有任何反应，表单也没有提交。

由于

<form action="login.php" id="login" class="iform" method="POST">
   <input type="text" class="inputs" placeholder="Username / Email" name="username" value="<?= $_COOKIE["loginreminder"]?>"/> <br /><br />
   <input type="password" name="password" class="inputs" placeholder="Password" /> <br /><br />
   <input type="checkbox" name="keep" id="1" class="css-checkbox" /><label for="1" class="css-label">Keep me logged in</label>
   <br><br>
   <input type='hidden' name='backtopage' value='<?= $sendback ?>'>
   <input type='hidden' name='submitbutt' value='Login'>
   <a href="#" onclick="document.getElementById('login').submit();" class="button-big"> Log in</a>
</form>

Answer 1

您正在使用<a href=...和javascript来提交表单，因此浏览器不知道提交操作应该是什么。

将其更改为

<input type="submit" value="Log in" />

或

<button type="submit">Log in<button>

使输入键自动工作。

使用<button></button>或<input type="submit" />也有助于提高辅助功能。

Answer 2

您可以在代码中添加一个快速JavaScript代码段来处理按键操作。

<script>
   function handleKeys(evt)
   {
      if(evt.keyCode === 13) /*13 is the keyCode for the 'Enter' key*/
      {
        var lgnBtn = document.getElementById('login');
        lgnBtn.submit();
      }
   }

   document.addEventListener('keydown', handleKeys, true);
</script>

您可以将其剪切并粘贴到HTML文件中，我确定它会起作用。此外，它简短，甜美，并没有使用任何第三方库的头痛！：d

Answer 3

这样的事情应该有效：

var doSubmit = function () {
    document.querySelector( '#login' ).submit();
};

document.querySelector( '#btn' ).addEventListener( 'click', function ( evt ) {
    evt.preventDefault();
    document.querySelector( '#login' ).submit();
}, false);

// var inputs = document.querySelectorAll( 'input' );
// This should be faster since it is constrained to a small portion of the document.
var inputs = document.getElementById( 'login' ).getElementsByTagName( 'input' );
for ( var i = 0, cur; cur = inputs[ i++ ] ; ) {
    if ( cur.type === 'text' || cur.type === 'password' ) {
        cur.addEventListener( 'keypress', function ( evt ) {
            if ( evt.keyCode === 13 ) {
                doSubmit();
            }
        }, false );
    }
}

我希望这可以作为一个例子，但你应该考虑其他人对提交按钮的看法。

当进入＆＃39;进入＆＃39;时，CSS按钮不会执行表格。按在键盘上

3 个答案: