Как установить правильную позицию курсора?
Есть к примеру следующая форма
<input onKeyUp="this.value = this.value.toLocaleLowerCase().replace(/([A-Za-z]*)/g,'');"> Соответственно, при вводе текста, курсор уходит или в начало или в конец формы, а нужно чтобы оставался на месте, те. если у меня скажем в середине удаляемые символы, то курсор уходит в конец к примеру, а нужно оставить его там же, с учетом удаленного символа Подскажите, пожалуйста. |
Пишу
var rng = document.getElementById("d").createRange();
Получаю TypeError: Object #<HTMLDivElement> has no method 'createRange' Подскажите, пожалуйста, что не так? |
Тут с готовой библиотекой:
<!DOCTYPE>
<html
<head>
<title>NO title</title>
<link rel="stylesheet" type="text/css" href="http://mjacksoninfo.userforum.ru/style/extra.9.css" />
<script type="text/javascript" src="http://forum.mybb.ru/js/reply.14.js"></script>
</head>
<body>
<!-- body-header -->
<div id="post-form" class="formal">
<h2><span>Быстрый ответ</span></h2>
<form id="post" class="container" method="post" action="http://" onsubmit="return process_form(this);" enctype="multipart/form-data">
<fieldset>
<div class="fs-box hashelp">
<div id="form-buttons">
<table cellspacing="0" cellpadding="0">
<tr>
<td id="button-bold" title="Жирный"><img onclick="bbcode('[b]','[/b]')" src="http://forum.mybb.ru/i/blank.gif" /></td>
<td id="button-italic" title="Наклонный"><img onclick="bbcode('[i]','[/i]')" src="http://forum.mybb.ru/i/blank.gif" /></td>
<td id="button-underline" title="Подчеркнутый"><img onclick="bbcode('[u]','[/u]')" src="http://forum.mybb.ru/i/blank.gif" /></td>
<td id="button-strike" title="Зачеркнутый"><img onclick="bbcode('[s]','[/s]')" src="http://forum.mybb.ru/i/blank.gif" /></td>
<td id="button-left" title="Выравнивание по левому краю"><img onclick="bbcode('[align=left]','[/align]')" src="http://forum.mybb.ru/i/blank.gif" /></td>
<td id="button-center" title="Выравнивание по центру"><img onclick="bbcode('[align=center]','[/align]')" src="http://forum.mybb.ru/i/blank.gif" /></td>
<td id="button-right" title="Выравнивание по правому краю"><img onclick="bbcode('[align=right]','[/align]')" src="http://forum.mybb.ru/i/blank.gif" /></td>
<td id="button-link" title="Ссылка"><img onclick="tag_url()" src="http://forum.mybb.ru/i/blank.gif" /></td>
<td id="button-image" title="Изображение"><img onclick="tag_image()" src="http://forum.mybb.ru/i/blank.gif" /></td>
<td id="button-quote" title="Цитата"><img onclick="bbcode('[quote]','[/quote]')" src="http://forum.mybb.ru/i/blank.gif" /></td>
</tr>
</table>
</div>
<p class="areafield required">
<span class="input"><textarea id="main-reply" name="req_message" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" rows="13" cols="75"></textarea></span>
</p>
</div>
</fieldset>
<p class="formsubmit"><input type="submit" class="button" name="submit" value="Отправить" accesskey="s" title="Accesskey:s" /></p>
</form>
</div>
</body>
</html>
|
Спасибо за ответ, но не совсем то.
Через инпут разобрался this.setSelectionRange(1,2) А вот если это div c contentEditable, то так не работает Но получилось, если сделать пустой span var rng = document.createRange(); rng.setStart(t.firstChild,window.getSelection().an chorOffset); rng.setEnd(t.firstChild,window.getSelection().anch orOffset); rng.surroundContents(document.createElement("span" )); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange( rng ); Только вот мне как-то не ясно зачем задавать firstChild. firstChild, - это что. Для чего? Здесь читал и пример взял отсюда http://learn.javascript.ru/vydelenie...роме-ie-9 но смысл как-то до меня не дошел. Объясните, пожалуйста |
platedz,
1. Текст выделять в техстареа ? 2. Опишите задумку: Для какого нужного действия всё это нужно ? |
Т.е. я так понимаю Range вырезает все от setStart до setEnd, а затем возвращает все на место. Непонятно, только для чего здесь firstChild, это чтобы дом элемент в виде массива был? Или для чего?
|
Да задумка вырезать ненужные символы. Т.е. не нужным мне латинские символы в поле ввода.
Но при replace каретка уходит или вначало или в конец, в зависимости от браузера, т.е. если с середины править, то каретка убегает. Как и описал выше я в принципе разобрался, сейчас разбираюсь с объектом range, неясным остались вышеуказанные вопросы. |
platedz,
Цитата:
|
<div contentEditable="true" id="dd" onKeyUp="this.value = this.value.toLocaleLowerCase().replace(/([A-Za-z]*)/g,'');">text</div> Да я в принципе добился результата, вышеуказанным способом, хотя еще не доделал, и до ie не добрался, но непонятным работа setStart и setEnd осталась и в частности первого аргумента |
Алгоритм - в х запоминаем положение курсора
находим первый удаляемый символ - если есть запоминаем в х номер, удаляем ненужное, ставим курсор в позицию х |
| Часовой пояс GMT +3, время: 20:16. |