Отображать выбор, когда textarea теряет фокус

У меня есть форма с текстовым полем и кнопкой:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
</head>
<body>

<p><textarea rows="4" cols="30">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</textarea></p>
<p><input type="button" value="Click me"></p>

</body>
</html>

Пользователь делает выбор текста, затем нажимает кнопку. Поскольку textarea теряет фокус, выбор больше не отображается.

Есть ли способ сделать выделение видимым? Его не нужно использовать (т.е. Нет необходимости в том, что, например, ввод удаляет выделение или Ctrl+C копирует его), но я бы ожидал какой-то визуальной обратной связи, что текстовая область содержит выбор.

Демо: Fiddle

Ответ 1

<textarea onblur="this.focus()">this is a test</textarea>
<p><input type="button" value="Click me"></p>

Это работает как в IE, так и в Chrome. Но не с FF.

Итак, вот общее решение:

<textarea onblur="doBlur(this)">this is a test</textarea>
<p><input type="button" value="Click me"></p>

<script>
function doBlur(obj) {
  setTimeout(function() { obj.focus(); }, 10);
}
</script>

Ответ 2

Вы можете обернуть textarea в iframe, который по-прежнему показывает выбор в кадре при нажатии кнопки.

Эта скрипта использует атрибут srcdoc, который поддерживается только Chrome и Safari 6. Вы все равно можете использовать iframe без этот атрибут.

EDIT: новый скрипт для хакеров /, который использует jquery для добавления iframe, работает как минимум в Chrome и FF (IE не разрешает URI данных в iframe по соображениям безопасности)

Ответ 3

То, что вы пытаетесь сделать, невозможно в текстовом поле.

Вместо использования текстового поля я бы предложил использовать div с contenteditable="true" и rangy. Затем заверните выделенный текст или выделите текст для фокуса и размытия событий.

Эта демонстрационная демонстрация демонстрирует, как выбрать текст: http://rangy.googlecode.com/svn/trunk/demos/highlighter.html

Ответ 4

Если кнопка :focus кнопки не имеет значения, вы можете использовать

$('input[type=button]').click(function () {
    $('textarea').focus();
});

Вот Fiddle.

Ответ 5

Я знаю, что это технически не то, что вы хотели, но я все равно обманываю.

JavaScript:

var textarea = document.getElementById('textarea');
var div = document.getElementById('holder');

var original_value = textarea.value;
textarea.onblur = function () {
    var start = textarea.selectionStart;
    var end = textarea.selectionEnd;
    textarea.style.display = "none";
    div.innerHTML = textarea.value.splice(end, 0, "</span>").splice(start, 0, "<span>");
    div.style.display = "block";
}

div.onclick = function () {
    div.style.display = "none";
    textarea.style.display = "block";
    textarea.value = original_value;
}

String.prototype.splice = function( idx, rem, s ) {
    return (this.slice(0,idx) + s + this.slice(idx + Math.abs(rem)));
};

HTML:

<p><textarea id="textarea" rows="4" cols="30">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</textarea></p>
<div id="holder"></div>
<p><input id="click" type="button" value="Click me"></p>

CSS

textarea, #holder{
    height: 120px;
    width: 300px;
    border: 1px solid black;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 3px;
    font-size: 10pt;
    font-family: Arial;
}
#holder{    
    display: none;
}
#holder span{
    background-color: #b4d5ff;
}

demo: http://jsfiddle.net/Mb89X/4/

Ответ 6

После копания через jsFiddle я обнаружил, что CodeMirror содержит все необходимое для создания сильно настраиваемого текстового поля. Он был создан для написания кодов, но с небольшим трюком, он может применяться к текстовым областям в целом.

См. DEMO

Сначала у вас готово текстовое поле:

<textarea id="a">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</textarea>

Затем поместите следующий script после него, чтобы создать текстовое поле CodeMirror, и предоставите дополнительные настройки, чтобы преобразовать его в обычную текстовую область.

mode: я использую "none" здесь, чтобы удалить подсветку синтаксиса.
lineWrapping: используйте true для переноса для длинных строк.

var myCodeMirror = CodeMirror.fromTextArea(document.getElementById("a"), {
    mode: "none",
    lineWrapping: true
});

Наконец, используйте CSS для управления размером и сделайте его похожим на стандартное текстовое поле:

.CodeMirror {
    font-family: monospace;
    font-size: 12px;
    width: 300px;
    height: 100px;
    border: solid 1px #000;
}

Ответ 7

Попробуйте следующее:

var element = document.getElementById('text')
if(element.setSelectionRange)
{
    element.focus();
    element.setSelectionRange(2, 10);    
}
else if(element.createTextRange)
{

    var selRange = element.createTextRange();
          selRange.collapse(true);
          selRange.moveStart('character', 2);
          selRange.moveEnd('character', 10);
          selRange.select();
          field.focus();
} else if( typeof element.selectionStart != 'undefined' ) {
      element.selectionStart = 2;
      element.selectionEnd = 10;
      element.focus();
}

http://jsfiddle.net/inser/YJzvb/2/