выделение текста
пытаюсь написать такую вещь чтоб выделеный текст при нажатие на кнопку брался в определенный тег.
я знаю что скрипт древний и используется наверно везде, но хочется написать самому. вот в чем загвоздка при нажатие на кнопку выделение слетает . пытался использовать
document.getElementById("text").focus();
но не помогло. вот первые строчки моего кода:)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<script type="text/javascript">
function test(){
var sel=document.getSelection();
if(document.getSelection()!=""){
document.getElementById("text").innerHTML=sel;
}
}
</script>
</head>
<body >
<textarea cols="50" rows="20" id="text" >Недавно Google на весь мир показала свой «проект «Glass», так называемые очки дополненной реальности.
И вот, не прошло и двух недель, как разработчик из Valve Майкл Абраш в блоге компании пишет, что им тоже очень интересна такая технология. Говорит, через 20 лет «зрение Терминатора» будет стандартом для общества, а переход на новую платформу может начаться уже через 3-5 лет.
Заинтересованность Valve в разработке очков-компьютера, который Абраш называет «носимый компьютер» также может подтверждать объявления компании о поиске инженеров по электронике и комплектующим, в которых упоминают, что их целью будет разработка новых систем ввода-вывода и создание новых платформ.
</textarea>
<br>
<br/>
<a onclick="test();" href="" >start</a>
<br>
<div id="vv"></div>
</body>
</html>
|
|
щас почитаю
|
мне кажется или статья "немного" устарела?=)
Дата 27.11.2004, 18:58 |
Да ничего не поменялось, разве что IE9+ стал поддерживать Selection и Range, наряду со своим TextRange
|
уже понял=)
потихоньку разбираю код |
я так понял чтоб запомнить позицию запоминается положение курсора и скрола?
|
Минимальный код такой:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>…</title>
</head>
<body>
<button id="btn-bold">B</button>
<button id="btn-italic">I</button>
<div>
<textarea id="text-editor" rows="5" cols="40">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</textarea>
</div>
<script>
function insertTag(tagOpen, tagClose) {
var textEditor = document.getElementById("text-editor"),
selStart, selEnd, text, range;
if ("selectionStart" in textEditor) {
selStart = textEditor.selectionStart;
selEnd = textEditor.selectionEnd;
text = textEditor.value;
textEditor.value = text.slice(0, selStart) + tagOpen + text.slice(selStart, selEnd) + tagClose + text.slice(selEnd);
}
else if ("selection" in document) { //для IE
textEditor.focus();
range = document.selection.createRange();
range.text = tagOpen + range.text + tagClose;
}
}
document.getElementById("btn-bold").onclick = function () {
insertTag("<b>", "</b>");
};
document.getElementById("btn-italic").onclick = function () {
insertTag("<i>", "</i>");
};
</script>
</body>
</html>
|
спс.
П.с самое смешное что изначально шел в этом направление как вы показали но потом |
что значит строка
"selectionStart" in textEditor |
| Часовой пояс GMT +3, время: 08:54. |