クリック時にHTMLテキスト入力のすべてのテキストを選択する

HTML Webページにテキストボックスを表示する次のコードがあります。

<input type="text" id="userid" name="userid" value="Please enter the user ID" />

ページが表示されると、テキストに「ユーザーIDを入力してください」というメッセージが含まれます。ただし、すべてのテキストを選択するには、ユーザーが3回クリックする必要があることがわかりました（この場合は、ユーザーIDを入力してください）。

ワンクリックでテキスト全体を選択することは可能ですか？

編集：

すみません、言うのを忘れました：入力を使用する必要があります type="text"

次のJavaScriptスニペットを使用できます。

<input onClick="this.select();" value="Sample Text" />

しかし、どうやらそれはモバイルSafariでは機能しません。そのような場合、以下を使用できます。

<input onClick="this.setSelectionRange(0, this.value.length)" value="Sample Text" />

以前に投稿されたソリューションには2つの癖があります。

1. Chromeでは、.select（）による選択は固執しません-わずかなタイムアウトを追加すると、この問題が解決します。
2. フォーカス後の任意の位置にカーソルを置くことはできません。

フォーカスのあるすべてのテキストを選択し、フォーカスの後に特定のカーソルポイントを選択できる完全なソリューションを次に示します。

        $(function () {
            var focusedElement;
            $(document).on('focus', 'input', function () {
                if (focusedElement == this) return; //already focused, return so user can now place cursor at specific point in input.
                focusedElement = this;
                setTimeout(function () { focusedElement.select(); }, 100); //select all text in any field on focus for easy re-entry. Delay sightly to allow focus to "stick" before selecting.
            });
        });

HTML（ページで機能させるすべての入力にonclick属性を配置する必要があります）

 <input type="text" value="click the input to select" onclick="this.select();"/>

またはより良いオプション

jQuery（これはページ上のすべてのテキスト入力で機能し、htmlを変更する必要はありません）：

<script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>  
<script type="text/javascript">
    $(function(){
        $(document).on('click','input[type=text]',function(){ this.select(); });
    });
</script>

私はこれが古いことを知っていますが、最善のオプションはplaceholder、可能であれば新しいHTML属性を使用することです。

<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />

これにより、値が入力されない限りテキストが表示され、テキストを選択したり入力をクリアしたりする必要がなくなります。

記載されている回答は、私によると部分的です。AngularとJQueryでこれを行う方法の2つの例を以下にリンクしました。

このソリューションには次の機能があります。

• JQuery、Safari、Chrome、IE、Firefoxなどをサポートするすべてのブラウザーで動作します。
• Phonegap / Cordovaに対応：AndroidとIO。
• 入力がフォーカスを取得してから次のぼかしまでフォーカスを1回だけ選択してからフォーカスする
• 複数の入力を使用でき、グリッチアウトしません。
• Angularディレクティブは再利用に優れており、select-all-on-clickディレクティブを追加するだけです
• jQueryは簡単に変更できます

JQuery： http ://plnkr.co/edit/VZ0o2FJQHTmOMfSPRqpH?p= preview

$("input").blur(function() {
  if ($(this).attr("data-selected-all")) {
  //Remove atribute to allow select all again on focus        
  $(this).removeAttr("data-selected-all");
  }
});

$("input").click(function() {
  if (!$(this).attr("data-selected-all")) {
    try {
      $(this).selectionStart = 0;
      $(this).selectionEnd = $(this).value.length + 1;
      //add atribute allowing normal selecting post focus
      $(this).attr("data-selected-all", true);
    } catch (err) {
      $(this).select();
      //add atribute allowing normal selecting post focus
      $(this).attr("data-selected-all", true);
    }
  }
});

Angular： http : //plnkr.co/edit/llcyAf?p=preview

var app = angular.module('app', []);
//add select-all-on-click to any input to use directive
app.directive('selectAllOnClick', [function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var hasSelectedAll = false;
      element.on('click', function($event) {
        if (!hasSelectedAll) {
          try {
            //IOs, Safari, thows exception on Chrome etc
            this.selectionStart = 0;
            this.selectionEnd = this.value.length + 1;
            hasSelectedAll = true;
          } catch (err) {
            //Non IOs option if not supported, e.g. Chrome
            this.select();
            hasSelectedAll = true;
          }
        }
      });
      //On blur reset hasSelectedAll to allow full select
      element.on('blur', function($event) {
        hasSelectedAll = false;
      });
    }
  };
}]);

試してください：

onclick="this.select()"

それは私にとって素晴らしい働きをします。

いつでも使用できますdocument.execCommand（すべての主要ブラウザでサポートされています）

document.execCommand("selectall",null,false);

現在フォーカスされている要素のすべてのテキストを選択します。

onfocusイベントでの入力オートフォーカス：

<INPUT onfocus="this.select()" TYPE="TEXT" NAME="thing" autofocus>

これにより、目的の要素を選択してフォームを開くことができます。これは、オートフォーカスを使用して入力をヒットすることによって機能し、次にそれ自体にonfocusイベントを送信し、次に、テキストを選択します。

注：を検討するとonclick="this.select()"、最初のクリックですべての文字が選択されます。その後、入力内の何かを編集して文字間でもう一度クリックしたいのですが、すべての文字が再び選択されます。この問題を修正するonfocusには、の代わりに使用する必要がありますonclick。

確かに使用しますonclick="this.select();"が、組み合わせないように注意してください。そのdisabled="disabled"場合は機能しません。手動で選択するか、マルチクリックして選択する必要があります。選択するコンテンツの値をロックする場合は、属性と組み合わせますreadonly。

ショーバンの回答の再利用可能なバージョンは次のとおりです。

<input type="text" id="userid" name="userid"
 value="Please enter the user ID" onfocus="Clear(this);"
/>

function Clear(elem)
{
elem.value='';
}

そうすることで、複数の要素にクリアスクリプトを再利用できます。

交換できます

<input type="text" id="userid" name="userid" value="Please enter the user ID" />

と：

<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />

プレースホルダーは、何回もクリックしたり、Ctrl + Aを使用したりせずにテキストボックスに入力できるようにする方法として、値を置き換えるために使用されます。プレースホルダーは、値ではありませんが、名前がプレースホルダーを示唆しているように作成します。これは、「ここにユーザー名」または「メール」と書かれた複数のオンラインフォームで使用されているものであり、クリックすると「メール」が消え、すぐに入力を開始できます。

あなたが尋ねたことの正確な解決策は：

<input type="text" id="userid" name="userid" value="Please enter the user ID" onClick="this.setSelectionRange(0, this.value.length)"/>

しかし、入力のプレースホルダーまたはヒントとして「ユーザーIDを入力してください」を表示しようとしていると思います。したがって、より効率的なソリューションとして以下を使用できます。

<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />

以下はReactの例ですが、必要に応じてバニラJSのjQueryに変換できます。

class Num extends React.Component {

    click = ev => {
        const el = ev.currentTarget;
        if(document.activeElement !== el) {
            setTimeout(() => {
                el.select();    
            }, 0);
        }
    }

    render() {
        return <input type="number" min={0} step={15} onMouseDown={this.click} {...this.props} />
    }
}

ここでの秘訣は、「クリック」イベントが発生onMouseDownするまでに要素がすでにフォーカスを受け取っているため（そしてactiveElementチェックが失敗するため）使用することです。

このactiveElementチェックは、ユーザーが常に入力全体を再選択することなく、必要な場所にカーソルを配置できるようにするために必要です。

タイムアウトが必要なのは、そうしないとテキストが選択されてすぐに選択が解除されるためです。ブラウザがカーソル位置のチェックを後から実行していると思います。

そして最後に、Reactはイベントオブジェクトを再利用し、setTimeoutが発生するまでに合成イベントを失うため、Reactではel = ev.currentTargetが必要です。

クリックイベントをキャッチする際の問題は、テキスト内でクリックを繰り返すたびに再度選択されることですが、ユーザーはおそらくカーソルを再配置することを期待していました。

私にとってうまくいったのは、変数selectSearchTextOnClickを宣言し、デフォルトでtrueに設定することでした。クリックハンドラーは、変数がまだtrueかどうかをチェックします。trueの場合、変数をfalseに設定し、select（）を実行します。次に、それをtrueに戻すblurイベントハンドラーを用意します。

これまでの結果は、私が期待する動作のようです。

（編集：誰かが提案したようにフォーカスイベントをキャッチしようとしたが、それはうまくいきませんでした。フォーカスイベントが発生した後、クリックイベントが発生し、テキストの選択がすぐに解除されます）。

この質問には、モバイルプラットフォームで.select（）が機能しない場合のオプションがあります：iOSデバイス（モバイルSafari）の入力フィールドでテキストをプログラムで選択

このようなHTML <input type="text" value="click the input to select" onclick="javascript:textSelector(this)"/>

バインドなしのJavaScriptコード

function textSelector(ele){
    $(ele).select();
}

これは、TextBoxの通常のアクティビティです。

クリック1-フォーカスを設定

2/3クリック（ダブルクリック）-テキストを選択

ページが最初に読み込まれるときにTextBoxにフォーカスを設定して、「選択」を1つのダブルクリックイベントに減らすことができます。

入力フィールドで「値」の代わりに「プレースホルダー」を使用します。

AngularJSを使用している場合は、カスタムディレクティブを使用して簡単にアクセスできます。

define(['angular'], function () {
    angular.module("selectionHelper", [])
    .directive('selectOnClick', function () {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {                
                element.on('click', function () {
                    this.select();
                });
            }
        };
    });
});

これで、次のように使用できます。

<input type="text" select-on-click ... />

サンプルにはrequirejsが含まれているため、何かを使用する場合は最初と最後の行をスキップできます。

誰もがjQuery（検索フィールドに最適）を使用したページ読み込みでこれを実行したい場合は、ここが私の解決策です

jQuery.fn.focusAndSelect = function() {
    return this.each(function() {
        $(this).focus();
        if (this.setSelectionRange) {
            var len = $(this).val().length * 2;
            this.setSelectionRange(0, len);
        } else {
            $(this).val($(this).val());
        }
        this.scrollTop = 999999;
    });
};

(function ($) {
    $('#input').focusAndSelect();
})(jQuery);

この投稿に基づく。CSS-Tricks.comに感謝

ユーザーが要素を選択したときに置き換えられるプレースホルダーテキストを作成しようとしているだけの場合は、placeholder今日の属性を使用することが明らかにベストプラクティスです。ただし、フィールドがフォーカスを取得したときに現在の値をすべて選択する場合は、@ Cory Houseと@Toastrackenigmaの回答の組み合わせが最も標準的なようです。現在のフォーカス要素を設定/解放し、フォーカスされたときにすべてを選択するハンドラーを使用focusしたfocusoutイベント。angular2 / typescriptの例は次のとおりです（ただし、バニラjsに変換するのは簡単です）。

テンプレート：

<input type="text" (focus)="focus()" (focusout)="focusout()" ... >

成分：

private focused = false;

public focusout = (): void => {
    this.focused = false;
};

public focus = (): void => {
    if(this.focused) return;
    this.focused = true;

    // Timeout for cross browser compatibility (Chrome)
    setTimeout(() => { document.execCommand('selectall', null, false); });
};