Как установить правильную позицию курсора?
Есть к примеру следующая форма
<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, время: 10:39. |