web-dev-qa-db-ja.com

クリックしたときにHTMLテキスト入力内のすべてのテキストを選択する

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

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

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

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

編集：

すみません、私は言うのを忘れました：私は入力type="text"を使わなければなりません

javascripthtmltextinput
467
Questions

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

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

しかし、どうやらそれはモバイルSafariでは動作しません。そのような場合、あなたは使うことができます：

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

以前に投稿されたソリューションには、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(); }, 50); //select all text in any field on focus for easy re-entry. Delay sightly to allow focus to "stick" before selecting.
            });
        });
58
Cory House

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>
42
oLinkWebDevelopment

私はこれが古いことを知っていますが、最善の選択肢は今なら可能であれば新しいplaceholder HTML属性を使うことです：

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

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

34
Thom Porter

リストされた答えは私によれば部分的です。 AngularとJQueryでこれを行う方法の2つの例を以下にリンクしました。

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

  • JQuery、Safari、Chrome、IE、Firefoxなどをサポートするすべてのブラウザで動作します。
  • Phonegap/Cordovaに対応：AndroidとIO。
  • 入力がフォーカスを取得してから次のブラーまでフォーカスしてからフォーカスを合わせた後に一度だけ選択します。
  • 複数の入力を使用することができ、それはグリッチアウトしません。
  • 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);
    }
  }
});

角度： 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;
      });
    }
  };
}]);
12
D Prinsloo

試してください：

onclick="this.select()"

それは私にとって素晴らしい仕事です。

10
Slulego

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

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

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

8
Toastrackenigma

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

6
LenArt

onfocusイベントを使ったオートフォーカスの入力：

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

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

5
fyngyrz

これがReactの例ですが、ご希望であればVanilla 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} />
    }
}

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

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

それ以外の場合は、テキストが選択されてすぐに選択されなくなるため、タイムアウトが必要になります。これは、ブラウザでカーソル位置の確認が行われた後に行われるためです。

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

3
mpen

これがShobanの答えの再利用可能版です。

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

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

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

3
Sean Patrick Floyd

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

バインドなしのJavaScriptコード

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

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

2
Dean Radcliffe

あなたが尋ねたものに対する正確な解決策は、

<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" />
2
Ayan

あなたは交換することができます

<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を使用したりしなくてもテキストボックスに入力できるようにする方法として、値を置き換えるために使用されます。プレースホルダーはそれを値ではなく、名前がプレースホルダーを示唆しているようにそれを作ります。それが「Username here」または「Email」という複数のオンラインフォームで使用されているもので、クリックすると「Email」が消えてすぐに入力を開始できます。

2
Pablo

Clickイベントをキャッチすることに伴う問題は、テキスト内のそれ以降の各クリックが再びそれを選択することですが、ユーザーはおそらくカーソルの位置を変えることを期待していました。

私にとってうまくいったのは、変数selectSearchTextOnClickを宣言し、それをデフォルトでtrueに設定することでした。クリックハンドラは、変数がまだtrueであることを確認します。もしそうであれば、falseに設定してselect（）を実行します。それから、それをtrueに戻すブラーイベントハンドラを持っています。

結果はこれまでのところ私が期待している動作のようです。

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

2
Luxocrates

注： onclick="this.select()"を検討すると、最初のクリックで、すべての文字が選択されます。その後、入力内の何かを編集して文字間をクリックし、その後すべての文字を選択することができます。この問題を解決するには、onfocusの代わりにonclickを使うべきです。

2
Amir Forsati

入力フィールドに「value」ではなく「placeholder」を使用してください。

1
seaJay

これはTextBoxの通常の動作です。

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

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

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

1
RPM1984

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

0
timtos

ユーザが要素を選択したときに置換されるプレースホルダテキストを使用しようとしているのであれば、今日ではplaceholder属性を使用することが明らかにベストプラクティスです。ただし、フィールドにフォーカスが移ったときに現在の値をすべて選択する場合は、@ Cory Houseと@Toastrackenigmaの回答の組み合わせが最も標準的な方法になります。現在のフォーカス要素を設定/解放し、フォーカスされているときはすべてを選択するハンドラとともに、focusおよびfocusoutイベントを使用します。 angular2/TypeScriptの例は次のとおりです（ただしVanilla 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); });
};
0
Eric Lease

誰かがページ読み込みw/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);

this postに基づいています。 CSS-Tricks.comに感謝します

0
Hugo Dias