Выделить весь текст в текстовом поле при щелчке по метке

Question

Я использую метку for атрибут для элементов ввода на моем веб-сайте, который поможет слепым пользователям.

В настоящее время, когда пользователь нажимает на метку, соответствующий вход активируется. Это означает, что если есть текстовое поле для имени, то курсор будет зайти в начало текстового поля.

Например, если в текстовом поле указано имя «Джон», то на метке щелчка курсор войдет в текстовое поле и будет отображаться перед «Джоном».

Но я хочу, чтобы он выбрал «Джон». Это означает, что текст текстового поля должен быть выбран.

Может ли кто-нибудь помочь мне, как я могу это реализовать?

Мой код показан ниже:

<div class="editor-label"> 
 
    <label for="ContactName">*Name</label> 
 
</div> 
 
<div class="editor-field"> 
 
    <div> 
 
    <input id="ContactName" maxLength="40" name="ContactName" type="text" value="John" /> 
 
    </div> 
 
</div>

Answer 1

Я уверен, если вы можете достичь этого, используя только HTML/CSS, так что это очень вероятно, что вы должны использовать LIB JS , например jQuery.

С помощью jQuery вы можете использовать метод select() при щелчке по метке, используя что-то вроде этого;

$(function() { 
    $('label').click(function() { 
     var id = $(this).attr('for'); 
     $('#'+id).select(); 
    }); 
}); 

Рабочий пример можно найти здесь: http://jsfiddle.net/sf3bgwxr/