web-dev-qa-db-ja.com

Chromeフォームの処理に関する問題：入力onfocus = "this.select（）"

ユーザーがフィールドをクリックしたときに、次のHTMLコードを使用してフォームフィールドの一部のテキストを自動選択しています。

<input onfocus="this.select()" type="text" value="Search">

これは、FirefoxとInternet Explorerで正常に機能します（目的は、ユーザーにフィールドを説明するためにデフォルトのテキストを使用し、クリックすると入力を開始できるように強調表示することです）が、うまく機能しません。クロム。 Chrome=のフォームフィールドをクリックすると、テキストが1秒間だけ強調表示され、カーソルがデフォルトのテキストの最後にジャンプし、強調表示が消えます。

Chromeでもこれを機能させる方法に関するアイデアはありますか？

htmlformsgoogle-chromewebkit
25
binaryorganic

Onfocusイベントにバインドする代わりに、このアクションをonclickイベントにバインドする必要があります。これは、意図したとおりに機能します。

<input onclick="this.select()" id="txt1" name="txt1" type="text" value="Search">
23
Bakhtiyor

本当にonfocusを使い続けると主張する場合は、onmouseup="return false"も追加する必要があります。

17
Lee Kowalkowski

これは私に最適です...

<input type="text"  onfocus="this.searchfocus = true;" onmouseup="if(this.searchfocus) {this.select(); this.searchfocus = false;}" />

Mousefocusイベントは、onfocusの後に発生します。

5
iLawton

これは、Firefoxで機能するソリューションです。ChromeおよびIE、キーボードフォーカスとマウスフォーカスの両方を備えています。また、フォーカスに続くクリックを正しく処理します（キャレットを移動し、テキストを再選択しません）。 ：

<input
onmousedown="this.clicked = 1;"
onfocus="if (!this.clicked) this.select(); else this.clicked = 2;"
onclick="if (this.clicked == 2) this.select(); this.clicked = 0;"
>

キーボードフォーカスでは、this.clickedが設定されていないため、テキストを選択するonfocusのみがトリガーされます。マウスフォーカスがある場合、onmousedownがトリガーされ、次にonfocusがトリガーされ、次にonclickがonclick内のテキストを選択しますが、onfocus内のテキストは選択しません（Chromeにはこの）。

フィールドがすでにフォーカスされているときにマウスをクリックしても、onfocusがトリガーされないため、何も選択されません。

4
Jakub Vrána

これを回避する方法は、setTimeout()を使用してselect()への実際の呼び出しを遅延させるラッパー関数を作成することでした。次に、テキストボックスのフォーカスイベントでその関数を呼び出すだけです。 setTimeoutを使用すると、呼び出しスタックが再び空になるまで実行が延期されます。これは、ブラウザーがクリック時に発生したすべてのイベント（マウスダウン、マウスアップ、クリック、フォーカスなど）の処理を終了したときです。少しハックですが、機能します。

function selectTextboxContent(textbox)
{
    setTimeout(function() { textbox.select(); }, 10);
}

次に、次のようなことを行って、フォーカスに基づいて選択を行います。

<input onfocus="selectTextboxContent(this);" type="text" value="Search">
3
Jason

Jasonの回答に基づいて、次の関数は、DOM入力ノードの「select」関数を、タイムアウトが組み込まれた更新バージョンに置き換えます。

if (/chrome/i.test(navigator.userAgent)) {
    HTMLInputElement.prototype.brokenSelectFunction = 
        HTMLInputElement.prototype.select;

    HTMLInputElement.prototype.select = function() {
        setTimeout(function(closureThis) { return function() {
            closureThis.brokenSelectFunction();
        }; }(this), 10);
    };
}

基本的に、（Chromeのみ）で組み込みの壊れたselect（）関数の名前をbrokenSelectFunction（）に変更し、brokenSelectFunction（を呼び出すselect（）と呼ばれるすべての入力に新しい関数を追加しました）遅延後。組み込みの選択関数がジェイソンの遅延を提案する固定関数に置き換えられているため、通常はselect（）を呼び出します。

このように、ラッパー関数を使用するために既存の呼び出しを変更することを心配する必要はありません（これがChromeで解決されたら、上記のシムを削除して通常に戻ることができます）。

textbox.select(); // now runs select with setTimeout built-in (in Chrome only)

編集：この問題はSafariを含むすべてのWebkitブラウザーで発生するため、ユーザーエージェントの一致を "chrome"から "webkit"に変更することをお勧めします。この修正はすべてのブラウザーで機能します。

3
Adam Hamilton

<input onmouseup=select()>を使用するだけです。これはすべてのブラウザで機能します。

2
icache

この質問は5年前に投稿されましたが、HTML5では、placeholder属性を使用してこの機能を作成できます。

<input type="text" name="fname" placeholder="First name">
2
Andrew Koper
_onfocus="setTimeout(function(){select(this)})" 
_

またはonfocus="setTimeout(function(){select(this)},118)" for Firefox。

1
Alexander V. Ulyanov

ありがとう ilawton 。これは私のために働く

    <input type="text"  onfocus="this.searchfocus = true;" onmouseup="if(this.searchfocus) {this.select(); this.searchfocus = false;}" />
0
Noor Muhammad