639

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

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

ページが表示されると、テキストに[ユーザー ID を入力してください]メッセージが含まれます。ただし、すべてのテキストを選択するには、ユーザーが 3 回クリックする必要があることがわかりました (この場合はPlease enter the user IDです)。

ワンクリックでテキスト全体を選択することはできますか?

編集：

申し訳ありませんが、言うのを忘れていました: 入力を使用する必要がありますtype="text"

4

28 に答える 28

1043

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

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

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

<input onClick="this.setSelectionRange(0, this.value.length)" value="Sample Text" />
于 2010-11-01T08:32:32.920 に答える
82

以前に投稿されたソリューションには、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.
    });
});
于 2013-10-21T15:21:13.937 に答える
52

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>
于 2012-10-10T05:16:41.353 に答える
40

これが古いことは承知していますが、可能であれば新しいplaceholderHTML 属性を使用することをお勧めします。

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

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

于 2013-05-17T06:25:58.447 に答える
12

試す：

onclick="this.select()"

それは私にとってとてもうまくいきます。

于 2013-01-29T00:17:30.927 に答える
9

onfocus イベントを使用した入力オートフォーカス:

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

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

于 2016-02-23T06:26:45.023 に答える
6

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

于 2013-06-05T11:22:22.087 に答える
4

これがShobanの答えの再利用可能なバージョンです：

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

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

そうすれば、複数の要素に対してクリアスクリプトを再利用できます。

于 2010-11-01T08:33:29.537 に答える
3

あなたが尋ねたことに対する正確な解決策は次のとおりです。

<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" />
于 2016-12-26T08:23:30.660 に答える
2

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

バインドなしのJavaScriptコード

function textSelector(ele){
    $(ele).select();
}
于 2015-10-12T09:57:07.030 に答える
2

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

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

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

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

于 2013-10-07T08:44:23.273 に答える
2

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

于 2013-12-02T04:47:36.743 に答える
1

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

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

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

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

于 2010-11-01T08:33:08.370 に答える
1

入力フィールドでは、「値」の代わりに「プレースホルダー」を使用してください。

于 2015-06-26T07:31:05.983 に答える
1

イベント経由で制御する方が良いと思います。このバリアントは非常に直感的に見え、ts でも動作します。

    onFocus={e => {
      e.target.select();
    }

クリックするたびにselectAllが必要な場合は、これを使用できます。

    onClick={e => {
      e.target.focus();
      e.target.select();
    }
于 2021-12-15T09:58:11.120 に答える
0

誰かが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 に感謝します。

于 2015-07-15T18:58:55.613 に答える
0

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 を使用しているため、他のものを使用する場合は最初と最後の行をスキップできます。

于 2015-06-26T07:45:34.707 に答える