Форум

platedz · #1 (**permalink**) 17.01.2013, 06:44

Есть к примеру следующая форма

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

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

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

platedz · #2 (**permalink**) 18.01.2013, 03:46

Пишу

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

Получаю

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

Подскажите, пожалуйста, что не так?

Deff · #3 (**permalink**) 18.01.2013, 04:34

Тут с готовой библиотекой:

<!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>

platedz · #4 (**permalink**) 18.01.2013, 06:22

Спасибо за ответ, но не совсем то.
Через инпут разобрался
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
но смысл как-то до меня не дошел. Объясните, пожалуйста

Deff · #5 (**permalink**) 18.01.2013, 06:26

platedz,
1. Текст выделять в техстареа ?
2. Опишите задумку: Для какого нужного действия всё это нужно ?

platedz · #6 (**permalink**) 18.01.2013, 06:29

Т.е. я так понимаю Range вырезает все от setStart до setEnd, а затем возвращает все на место. Непонятно, только для чего здесь firstChild, это чтобы дом элемент в виде массива был? Или для чего?

platedz · #7 (**permalink**) 18.01.2013, 06:32

Да задумка вырезать ненужные символы. Т.е. не нужным мне латинские символы в поле ввода.
Но при replace каретка уходит или вначало или в конец, в зависимости от браузера, т.е. если с середины править, то каретка убегает. Как и описал выше я в принципе разобрался, сейчас разбираюсь с объектом range, неясным остались вышеуказанные вопросы.

Deff · #8 (**permalink**) 18.01.2013, 06:37

platedz,

Сообщение от Deff

1. Текст выделять в техстареа ? или ?

platedz · #9 (**permalink**) 18.01.2013, 06:47

<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

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

Форум

Справочник

Discord чат

Курсы javascript