Вибір всього тексту у введенні тексту HTML при натисканні на нього

У мене є наступний код для відображення текстового поля на веб-сторінці HTML.

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

Коли відображається сторінка, текст містить повідомлення Будь ласка, введіть ідентифікатор користувача . Однак я виявив, що користувачеві потрібно натиснути 3 рази, щоб вибрати весь текст (у цьому випадку це Будь ласка, введіть ідентифікатор користувача ).

Чи можна виділити весь текст лише одним клацанням миші?

Редагувати:

Вибачте, я забув сказати: я повинен використовувати вхід type="text"

Ви можете використовувати цей фрагмент javascript:

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

Але, мабуть, це не працює на мобільному Safari. У цих випадках ви можете використовувати:

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

Раніше розміщені рішення мають дві примхи:

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.

Це рішення має такі особливості:

• Працює для всіх браузерів, які підтримують JQuery, Safari, Chrome, IE, Firefox тощо.
• Працює для Phonegap / Cordova: Android та IO.
• Вибирає лише один раз після введення фокус до наступного розмиття, а потім фокусування
• Можна використовувати кілька входів, і це не виблискує.
• Кутова директива має велике повторне використання, просто додайте директиву 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;
      });
    }
  };
}]);

Спробуйте:

onclick="this.select()"

Це чудово працює для мене.

Ви завжди можете використовувати document.execCommand( підтримується у всіх основних браузерах )

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

Виділяє весь текст у зосередженому на даний момент елементі.

вхід автофокусування, з подією фокусування:

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

Це дозволяє відкрити форму з обраним потрібним елементом. Він працює за допомогою автофокусування для потрапляння на вхід, який потім надсилає собі подію фокусування, яка в свою чергу вибирає текст.

Примітка. Коли ви вважаєте 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)"/>

Але я гадаю, ви намагаєтесь показати "Будь ласка, введіть ідентифікатор користувача" як заповнювач або підказку у введенні. Отже, ви можете використовувати наступне як більш ефективне рішення:

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

Ось приклад у React, але він може бути перекладений у jQuery на ванільній JS, якщо ви бажаєте:

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 перевірка не вдасться).

The activeElementПеревірка необхідна для того , щоб вони користувач може помістити їх курсор туди , де вони хочуть , без необхідності постійно повторно вибрати весь вхід.

Час очікування необхідний, оскільки в іншому випадку текст буде обраний, а потім миттєво невибраний, як я думаю, браузер робить перевірку позиціонування курсору післязаписів.

І, нарешті, el = ev.currentTargetнеобхідно в React, оскільки React повторно використовує об'єкти події, і ви втратите синтетичну подію до моменту запуску setTimeout.

Проблема з захопленням події клацання полягає в тому, що кожен наступний клік в тексті буде вибирати його знову, тоді як користувач, ймовірно, розраховував змінити курсор.

Що для мене працювало - оголосити змінну, selectSearchTextOnClick та встановити її за значенням за замовчуванням. Обробник кліків перевіряє, чи змінна все-таки вірна: якщо вона є, вона встановлює значення false та виконує select (). Потім у мене є обробник подій розмитості, який повертає його до істинного.

Поки що результати здаються такою поведінкою, яку я очікував.

(Редагувати: я знехтував сказати, що намагався зафіксувати подію фокусування так, як хтось запропонував, але це не працює: після запуску події фокусування подія натискання може запуститись, негайно скасувавши вибір тексту).

У цьому питанні є варіанти, коли .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, коли сторінка спочатку завантажується, щоб зменшити "вибір" до події подвійного клацання.

Використовуйте "заповнювач місця" замість "значення" у полі введення.

Якщо ви використовуєте 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 ... />

Зразок складається з Requjs - тому перший і останній рядки можна пропустити, якщо використовувати щось інше.

Якщо хтось хоче це зробити на завантаженні сторінки 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);

На основі цієї публікації. Завдяки CSS-Tricks.com

Якщо ви просто намагаєтесь залишити текст-заповнювач, який заміняється, коли користувач вибирає елемент, то сьогодні, очевидно, найкраща практика використовувати placeholderатрибут. Однак якщо ви хочете вибрати все поточне значення, коли поле отримує фокус, тоді комбінація відповідей @Cory House та @Toastrackenigma здається найбільш канонічною. Використовуйте focusіfocusout події, використовуючи обробники, які встановлюють / відпускають поточний елемент фокусування, і виберіть усі, коли зосереджено. Приклад angular2 / typecript наступний (але було б тривіально для перетворення у 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); });
};