У меня есть следующий код для отображения текстового поля на веб-странице HTML.
<input type="text" id="userid" name="userid" value="Please enter the user ID" />
Когда страница отображается, текст содержит "Пожалуйста, введите идентификатор пользователя". Тем не менее, я обнаружил, что пользователю нужно щелкнуть 3 раза, чтобы выбрать весь текст (в этом случае нужно ввести идентификатор пользователя).
Можно ли всего текста выделить всего один клик?
Edit:
Извините, я забыл сказать: я должен использовать вход type="text"
Вы можете использовать этот фрагмент javascript:
<input onClick="this.select();" value="Sample Text" />
Но, по-видимому, он не работает на мобильном Safari. В этих случаях вы можете использовать:
<input onClick="this.setSelectionRange(0, this.value.length)" value="Sample Text" />
Ранее опубликованные решения имеют две особенности:
Здесь представлено полное решение, которое выбирает весь текст в фокусе, но позволяет выбрать конкретную точку курсора после фокусировки.
$(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.
Это решение имеет следующие функции:
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;
});
}
};
}]);
Try:
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, которое, в свою очередь, выбирает текст.
Здесь можно использовать многократную версию ответа Shoban:
<input type="text" id="userid" name="userid"
value="Please enter the user ID" onfocus="Clear(this);"
/>
function Clear(elem)
{
elem.value='';
}
Таким образом вы можете повторно использовать прозрачный script для нескольких элементов.
Ну, это нормальная активность для TextBox.
Нажмите 1 - установите фокус
Нажмите 2/3 (двойной щелчок) - выберите текст
Вы можете установить фокус в TextBox, когда первая страница загружается, чтобы уменьшить "выбрать" до одного события двойного щелчка.
Проблема с улавливанием события кликов состоит в том, что каждый последующий щелчок в тексте будет выбирать его снова, тогда как пользователь, вероятно, предпочтет переместить курсор.
Что сработало для меня, было объявление переменной, selectSearchTextOnClick и установка по умолчанию true. Обработчик кликов проверяет, что переменная по-прежнему верна: если она есть, она устанавливает значение false и выполняет select(). Затем у меня есть обработчик события размытия, который возвращает значение true.
Результаты пока выглядят так, как я ожидал.
(Edit: я забыл сказать, что я пытался поймать фокусное событие, как кто-то предложил, но это не работает: после того, как событие фокуса загорается, событие click может срабатывать, сразу же отменяя выбор текста).
У этого вопроса есть варианты, когда .select() не работает на мобильных платформах: Программный выбор текста в поле ввода на устройствах iOS (мобильное Safari)
Используйте "placeholder" вместо "value" в вашем поле ввода.
Html как это
<input type="text" value="click the input to select" onclick="javascript:textSelector(this)"/>
и код javascript без привязки
function textSelector(ele){
$(ele).select();
}
Точное решение по вашему желанию:
<input type="text" id="userid" name="userid" value="Please enter the user ID" onClick="this.setSelectionRange(0, this.value.length)"/>
Но я полагаю, вы пытаетесь показать "Пожалуйста, введите идентификатор пользователя в качестве заполнителя или намека на ввод. Таким образом, вы можете использовать следующее как более эффективное решение:
<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />
Если вы используете 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 - поэтому первая и последняя строка могут быть пропущены при использовании чего-то еще.
Если кто-то захочет сделать это при загрузке страницы 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
Если вы просто пытаетесь получить текст заполнителя, который заменяется, когда пользователь выбирает этот элемент, то, очевидно, лучше всего использовать атрибут 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); });
};