onclick vs. onfocus - поведение при выборе ввода текста отличается.Зачем? - PullRequest
Новая
       27

onclick vs. onfocus - поведение при выборе ввода текста отличается.Зачем?

5 голосов
/ 23 марта 2012

Я вижу, что когда я выделяю текст в текстовом поле с помощью функции 'onfocus', я не получаю ожидаемого поведения.

Вот демонстрационный URL: http://jsfiddle.net/BquZz/

Ниже следует копия кода: 

<!DOCTYPE html>
<html>
<head>
<title>Select all</title>
<script type="text/javascript">
var text;
var log;

function select()
{
    text.select();
    log.innerHTML += ' - select';
}

window.onload = function() {
    text = document.getElementById('text');
    log = document.getElementById('log');
    log.innerHTML = 'start';

    text.onfocus = select;
}
</script>
</head>
<body>
<input type="text" id="text" readonly="readonly" value="hello, world">
<div id="log">
</div>
</body>
</html>

Я повторяю следующий эксперимент несколько раз.

  1. Щелкните где-нибудь за пределами текстового поля, чтобы размыть текстовое поле.
  2. Нажмите на текстовое поле, чтобы сфокусировать текстовое поле.

Я ожидаю, что каждый раз в конце шага 2 должна быть выбрана строка «привет, мир» в текстовом поле. Однако это не то, что я наблюдаю. В Iceweasel 11.0 в Debian GNU / Linux (Wheezy) по окончании альтернативных экспериментов «привет, мир» не выбирается. В оставшихся экспериментах иногда я вижу строку «привет, мир» полностью выделенную, а иногда частично выбранную. В бета-версии Chrome 18.0.1025.33 на Debian GNU / Linux (Wheezy) я редко получаю желаемый результат. В большинстве случаев ничего не выбрано.

Я знаю, как это исправить. Измените text.onfocus = select на text.onclick = select. С помощью функции select(), вызванной с помощью onclick, я получаю ожидаемый результат. Вот демонстрационный URL, который показывает желаемый результат с помощью 'onclick': http://jsfiddle.net/5EZwR/

Не могли бы вы помочь мне понять, почему я не получаю ожидаемый результат с помощью "onfocus", а получаю его с помощью "onclick"?

1 Ответ

2 голосов
/ 23 марта 2012

Я думаю, что проблема в том, что .select() делает две вещи: он устанавливает диапазон выделения для включения всего текста, и он заставляет поле быть сфокусированным.Браузеры не любят повторный выбор, хотя Chrome и Firefox ведут себя по-разному.

Если вы измените его на: 

text.setSelectionRange(0, 10000);

, тогда он будет работать в Firefox.(Я думаю, что для Internet Explorer все должно быть иначе.)

edit - На этот вопрос Stackoverflow есть хороший ответ (г-н Димитров), который должен работатьдля всех браузеров.

...