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つの問題があります。
これは、フォーカスされているすべてのテキストを選択する完全な解決策ですが、フォーカス後に特定のカーソルポイントを選択することを可能にします。
$(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.
});
});
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: 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;
});
}
};
}]);
試してください:
onclick="this.select()"
それは私にとって素晴らしい仕事です。
いつでもdocument.execCommand
を使うことができます( すべての主要ブラウザでサポートされています )
document.execCommand("selectall",null,false);
現在フォーカスされている要素内のすべてのテキストを選択します。
実際には、onclick="this.select();"
を使用しますが、disabled="disabled"
と組み合わせないように注意してください。そうしないと、手動で選択するか、マルチクリックして選択する必要があります。選択する内容の値をロックしたい場合は、属性readonly
と組み合わせてください。
onfocusイベントを使ったオートフォーカスの入力:
<INPUT onfocus="this.select()" TYPE="TEXT" NAME="thing" autofocus>
これにより、目的の要素を選択してフォームを開くことができます。これはオートフォーカスを使って入力をヒットさせることで機能し、それが次にそれ自身にonfocusイベントを送り、それが次にテキストを選択します。
これが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が発生するまでに合成イベントを失うからです。
これがShobanの答えの再利用可能版です。
<input type="text" id="userid" name="userid"
value="Please enter the user ID" onfocus="Clear(this);"
/>
function Clear(elem)
{
elem.value='';
}
そうすれば、複数の要素に対してクリアスクリプトを再利用できます。
このようなHTML <input type="text" value="click the input to select" onclick="javascript:textSelector(this)"/>
バインドなしのJavaScriptコード
function textSelector(ele){
$(ele).select();
}
この質問には、.select()がモバイルプラットフォームで機能しない場合の選択肢があります。 iOSデバイスの入力フィールドでテキストをプログラムで選択する(モバイルSafari)
あなたが尋ねたものに対する正確な解決策は、
<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" />
あなたは交換することができます
<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」が消えてすぐに入力を開始できます。
Clickイベントをキャッチすることに伴う問題は、テキスト内のそれ以降の各クリックが再びそれを選択することですが、ユーザーはおそらくカーソルの位置を変えることを期待していました。
私にとってうまくいったのは、変数selectSearchTextOnClickを宣言し、それをデフォルトでtrueに設定することでした。クリックハンドラは、変数がまだtrueであることを確認します。もしそうであれば、falseに設定してselect()を実行します。それから、それをtrueに戻すブラーイベントハンドラを持っています。
結果はこれまでのところ私が期待している動作のようです。
(編集:私は誰かが提案したようにフォーカスイベントをキャッチしようとしたと言うのを怠ったが、それはうまくいきません:フォーカスイベントが発生した後、クリックイベントが発生し、すぐにテキストを選択解除できます)。
注: onclick="this.select()"
を検討すると、最初のクリックで、すべての文字が選択されます。その後、入力内の何かを編集して文字間をクリックし、その後すべての文字を選択することができます。この問題を解決するには、onfocus
の代わりにonclick
を使うべきです。
入力フィールドに「value」ではなく「placeholder」を使用してください。
これはTextBoxの通常の動作です。
クリック1 - フォーカスを設定
クリック2/3 (ダブルクリック) - テキストを選択
ページが最初に読み込まれたときに focus を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を使用しています - そのため、他のものを使用する場合は最初と最後の行をスキップすることができます。
ユーザが要素を選択したときに置換されるプレースホルダテキストを使用しようとしているのであれば、今日では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); });
};
誰かがページ読み込み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に感謝します