3

データベースのさまざまなフィールドを更新するテーブルを作成しています。現在の値が出力され、続いて送信ボタンと新しい値を入力するためのテキスト フィールドが表示されます。

特定のフィールドに新しい値を入力すると、このテキスト フィールドの送信ボタンが自動的にフォーカスされ、Enter キーを押すだけでデータベースを更新できるようになります。これはどのように達成されますか？単純なHTMLで可能でなければならないと思っています。コードの一部を次に示します。

echo "
<form method='post'>
    <table>
        <tr>
            <th>Amount to receive</th>
            <td>" . mysql_result($result, 0, "amountToReceive") . "</td>" . "
            <td><input type='submit' value='Change' name='btnChangeAmountToReceive'> <input type='text' name='txtChangeAmountToReceive'></td>
        </tr><tr>
            <th>Amount received</th>
            <td>" . mysql_result($result, 0, "amountReceived") . "</td>" . "
            <td><input type='submit' value='Change' name='btnChangeAmountReceived'> <input type='text' name='txtChangeAmountReceived'></td>
        </tr>
    </table>
</form>";
4

6 に答える 6

7

これを実現する方法は、javascript を使用することです。jQuery を使用することをお勧めします。

    $('#mytextfield').change(function(e) {
        $('input[type=submit]').focus();
    });

または、jarry's を試すことができます

<input type="text" onkeypress="return focusOnEnter(event)" /> 
<script type="text/javascript">
function focusOnEnter(e)
{
var keynum = e.keyCode || e.which;  //for compatibility with IE < 9
if(keycode == 13) //13 is the enter char code
    document.getElementsByName('btnChangeAmountReceived')[0].focus();
return true;
}
</script>

属性を追加することで、HTML5 の要素にオートフォーカスすることもできますautofocus="autofocus"

于 2012-04-10T03:49:41.993 に答える
2

kinakuta が言ったように、やりたいことをするには JavaScript を使う必要があります。

このような何かがうまくいくでしょう

<input type="text" onkeypress="return focusOnEnter(event)" /> 
<script type="text/javascript">
function focusOnEnter(e)
{
var keynum = e.keyCode || e.which;  //for compatibility with IE < 9
if(keycode == 13) //13 is the enter char code
    document.getElementsByName('btnChangeAmountReceived')[0].focus();
return true;
}
</script>

編集

Frank S.の回答を読んだ後、 onchange イベントを使用するのがより良い解決策だと思います:

<input type="text" onchange="focusOnEnter()" /> 
<script type="text/javascript">
function focusOnEnter()
{
    document.getElementsByName('btnChangeAmountReceived')[0].focus();
}
</script>
于 2012-04-10T03:46:31.857 に答える
0

これを試して

<script type="text/javascript">
function focusbutton() 
{
 if( event.keyCode == 13 )
 document.getElementById('BUTTON_ID').click();
}
</script>

13 : Enter の ASCII コード

于 2014-03-04T17:58:35.117 に答える
0 
<script type="text/javascript">
function focusbutton() 
{
  if( event.keyCode == 13 )
  document.getElementById('BUTTON_ID').click();
}
</script>
于 2014-03-04T17:53:10.693 に答える
0

入力要素に「tabindex」属性を使用して、単純なhtmlである要件を達成できます。

于 2012-04-10T03:43:11.143 に答える
0

きなくたさんが言っていたように、JavaScript(jQuery)の方がずっといいと思います。これは、必要なすべてを説明するリンクです。http://jqueryminute.com/set-focus-to-the-next-input-field-with-jquery/

于 2012-04-10T03:48:40.467 に答える