6

'onfocus'関数を使用してテキストボックス内のテキストを選択すると、期待した動作が得られないことがわかります。

デモのURLは次のとおりです：http：//jsfiddle.net/BquZz/

コードのコピーは次のとおりです。

<!DOCTYPE html>
<html>
<head>
<title>Select all</title>
<script type="text/javascript">
var text;
var log;

function select()
{
    text.select();
    log.innerHTML += ' - select';
}

window.onload = function() {
    text = document.getElementById('text');
    log = document.getElementById('log');
    log.innerHTML = 'start';

    text.onfocus = select;
}
</script>
</head>
<body>
<input type="text" id="text" readonly="readonly" value="hello, world">
<div id="log">
</div>
</body>
</html>

次の実験を複数回繰り返します。

  1. テキストボックスをぼかすには、テキストボックスの外側をクリックします。
  2. テキストボックスにフォーカスするには、テキストボックスをクリックします。

手順2の最後で、テキストボックスの文字列「hello、world」を毎回選択する必要があると思います。しかし、これは私が観察していることではありません。Debian GNU / Linux（Wheezy）上のIceweasel 11.0では、代替実験の最後に「hello、world」が選択されていません。残りの実験では、「hello、world」という文字列が完全に選択されている場合と、部分的に選択されている場合があります。Debian GNU / Linux（Wheezy）のChrome 18.0.1025.33ベータ版では、望ましい結果が得られることはめったにありません。ほとんどの場合、何も選択されていません。

私はこれを修正する方法を知っています。に変更text.onfocus = selectしtext.onclick = selectます。select()で呼び出された関数を使用するとonclick、期待どおりの結果が得られます。'onclick'を使用して目的の結果を示すデモURLは次のとおりです。http：//jsfiddle.net/5EZwR/

「onfocus」では期待どおりの結果が得られないのに、「onclick」では得られる理由を理解するのを手伝っていただけませんか。

4

1 に答える 1

2

問題は、 2つ.select()のことを行うことだと思います。それは、すべてのテキストを含むように選択範囲を設定することと、フィールドをフォーカスすることです。ChromeとFirefoxの動作は異なりますが、ブラウザは繰り返し選択することを嫌うようです。

次のように変更した場合：

text.setSelectionRange(0, 10000);

その後、Firefoxで動作します。（Internet Explorerでは異なる必要があると思います。）

編集—このStackoverflowの質問には、すべてのブラウザで機能するはずの良い答え（ディミトロフ氏）があります。

于 2012-03-23T12:37:53.773 に答える