Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.01.2013, 06:44
Профессор
Отправить личное сообщение для platedz Посмотреть профиль Найти все сообщения от platedz
 
Регистрация: 15.08.2012
Сообщений: 285

Как установить правильную позицию курсора?
Есть к примеру следующая форма

<input onKeyUp="this.value = this.value.toLocaleLowerCase().replace(/([A-Za-z]*)/g,'');">


Соответственно, при вводе текста, курсор уходит или в начало или в конец формы, а нужно чтобы оставался на месте, те. если у меня скажем в середине удаляемые символы, то курсор уходит в конец к примеру, а нужно оставить его там же, с учетом удаленного символа

Подскажите, пожалуйста.

Последний раз редактировалось platedz, 17.01.2013 в 14:50.
Ответить с цитированием
  #2 (permalink)  
Старый 18.01.2013, 03:46
Профессор
Отправить личное сообщение для platedz Посмотреть профиль Найти все сообщения от platedz
 
Регистрация: 15.08.2012
Сообщений: 285

Пишу

var rng = document.getElementById("d").createRange();


Получаю

TypeError: Object #<HTMLDivElement> has no method 'createRange'

Подскажите, пожалуйста, что не так?
Ответить с цитированием
  #3 (permalink)  
Старый 18.01.2013, 04:34
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Тут с готовой библиотекой:
<!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>

Последний раз редактировалось Deff, 18.01.2013 в 04:44.
Ответить с цитированием
  #4 (permalink)  
Старый 18.01.2013, 06:22
Профессор
Отправить личное сообщение для platedz Посмотреть профиль Найти все сообщения от platedz
 
Регистрация: 15.08.2012
Сообщений: 285

Спасибо за ответ, но не совсем то.
Через инпут разобрался
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
но смысл как-то до меня не дошел. Объясните, пожалуйста
Ответить с цитированием
  #5 (permalink)  
Старый 18.01.2013, 06:26
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

platedz,
1. Текст выделять в техстареа ?
2. Опишите задумку: Для какого нужного действия всё это нужно ?
Ответить с цитированием
  #6 (permalink)  
Старый 18.01.2013, 06:29
Профессор
Отправить личное сообщение для platedz Посмотреть профиль Найти все сообщения от platedz
 
Регистрация: 15.08.2012
Сообщений: 285

Т.е. я так понимаю Range вырезает все от setStart до setEnd, а затем возвращает все на место. Непонятно, только для чего здесь firstChild, это чтобы дом элемент в виде массива был? Или для чего?
Ответить с цитированием
  #7 (permalink)  
Старый 18.01.2013, 06:32
Профессор
Отправить личное сообщение для platedz Посмотреть профиль Найти все сообщения от platedz
 
Регистрация: 15.08.2012
Сообщений: 285

Да задумка вырезать ненужные символы. Т.е. не нужным мне латинские символы в поле ввода.
Но при replace каретка уходит или вначало или в конец, в зависимости от браузера, т.е. если с середины править, то каретка убегает. Как и описал выше я в принципе разобрался, сейчас разбираюсь с объектом range, неясным остались вышеуказанные вопросы.
Ответить с цитированием
  #8 (permalink)  
Старый 18.01.2013, 06:37
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

platedz,
Сообщение от Deff
1. Текст выделять в техстареа ? или ?
Ответить с цитированием
  #9 (permalink)  
Старый 18.01.2013, 06:47
Профессор
Отправить личное сообщение для platedz Посмотреть профиль Найти все сообщения от platedz
 
Регистрация: 15.08.2012
Сообщений: 285

<div contentEditable="true" id="dd" onKeyUp="this.value = this.value.toLocaleLowerCase().replace(/([A-Za-z]*)/g,'');">text</div>


Да я в принципе добился результата, вышеуказанным способом, хотя еще не доделал, и до ie не добрался, но непонятным работа setStart и setEnd осталась и в частности первого аргумента
Ответить с цитированием
  #10 (permalink)  
Старый 18.01.2013, 09:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Алгоритм - в х запоминаем положение курсора
находим первый удаляемый символ - если есть запоминаем в х номер, удаляем ненужное, ставим курсор в позицию х

Последний раз редактировалось рони, 18.01.2013 в 09:34.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как правильно установить куки? nip Общие вопросы Javascript 0 30.10.2012 19:55
Как в IE динамически установить значение события onClick? Гость Элементы интерфейса 6 16.01.2011 23:46
Как изменить текст при наведении курсора? sewernik Элементы интерфейса 2 13.04.2009 19:31
Как сделать ссылку картинку, которая изменяется при наводе курсора на неё? Кирилл Общие вопросы Javascript 2 10.03.2009 15:14
как определить позицию элемента относительно окна scuter Events/DOM/Window 5 07.05.2008 18:47