Help us understand the problem. What is going on with this article?

オートフォーカスしてカーソルを末尾に移動させる小技

More than 5 years have passed since last update.

HTML5の autofocus 属性を使うとChrome以外でうまく動作しないので別の方法を採用しました。
jQueryを使ったほうが短く書けますが、ここでは使わずに書いてみます。

PHP
$val = isset($_GET['val']) && is_string($_GET['val']) ? $_GET['val'] : '';
$val = htmlspecialchars($val, ENT_QUOTES, 'UTF-8');
JavaScript
function load_focus() {
  var elm = document.test_form.test_text;
  var val = elm.value;
  elm.value = '';
  elm.focus();
  elm.value = val;
}
HTML
<body onload="load_focus()">
<form name="test_form" method="get" action="">
<label>TestText: <input type="text" name="test_text" value="<?=val?>"></label>
<label><input type="submit" value="送信"></label>
</form>
</body>
  • 入力済みのvalueがある場合は一度空にする
  • フォーカスしてから値をセットする

この2点を守るのがポイントです。
これで

  • Internet Explorer
  • Mozilla Firefox
  • Google Chrome

3ブラウザとも動作確認できました。

mpyw
古い記事はそのまま参考にしないようにご注意ください
synapse
Synapseは、オンラインサロンサービスにおけるパイオニアとして、かつて存在していたスタートアップです。
https://synapseam.github.io/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away