Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.01.2016, 18:36
Аватар для balov_bohdan
Новичок на форуме
Отправить личное сообщение для balov_bohdan Посмотреть профиль Найти все сообщения от balov_bohdan
 
Регистрация: 12.01.2016
Сообщений: 6

Счетчик символов, как у Twitter
Доброго времени суток! Пишу на JS поле ввода, как у Твиттера (прикрепляю образец). На последнем шаге столкнулся с с задачей, которую никак не могу решить: изменение фона (или цвета) лишнего текста. Пробовал так: преобразовал вводимые символы в массив, разбил их на две части (допустимую и лишнюю), выполнил преобразование второй части (лишней), конкатенировал обе части и возвращал в поле ввода. Вариант оказался неудачным из-за невозможности полноценного форматирования строки в JS.

Кто-нибудь сталкивался с подобной задачей? Буду благодарен за ответ.
Изображения:
Тип файла: jpg ewufhwifhiuw.jpg (23.4 Кб, 10 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 12.01.2016, 19:13
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 11,629

http://htmlbook.ru/html/attr/contenteditable

а в поле ввода никак.
Ответить с цитированием
  #3 (permalink)  
Старый 12.01.2016, 19:29
Кандидат Javascript-наук
Отправить личное сообщение для jeysmook Посмотреть профиль Найти все сообщения от jeysmook
 
Регистрация: 24.04.2012
Сообщений: 118

balov_bohdan,
Да тут нужно использовать разметку, вот тебе набросал, но его нужно доделывать
http://codepen.io/anon/pen/yeXGRO?editors=010
Ответить с цитированием
  #4 (permalink)  
Старый 12.01.2016, 21:42
Профессор
Отправить личное сообщение для Keramet Посмотреть профиль Найти все сообщения от Keramet
 
Регистрация: 30.12.2015
Сообщений: 194

как вариант, но "не фонтан"
<!doctype html>
<html>
	<head>
		<meta charset="utf8">
		<title>This</title>
		<style> 
			#main {
				width: 500px;
				height: 50px;
				padding: 5px;
				border: 1px solid #c0c0c0;
				background-color: #eee;
				border-radius: 5px;
			}
			#main em {
				background-color: rgba(0,0,0,.3);
			}
		</style>
		<script>
    window.onload = function() {
		var maxLen = 10;
		var strBefore, strAfter;
		var div = document.getElementById("main");
		
		div.onkeyup  = function() {
			strBefore = this.innerText;
			if (strBefore.length > maxLen) {
				strAfter = strBefore.slice(10);
				strBefore = strBefore.substr(0, 10);
				this.innerHTML = strBefore + "<em>" + strAfter + "</em>";
				setToEnd(div);
				console.log(strBefore);
				console.log(strAfter);
				console.log(this.innerText);
				
			}
			var txt = this.innerText;
		};
		
		function setToEnd(el) {
			var range,selection;
			if(document.createRange) {			//	для всех, IE8-
				range = document.createRange();//Create a range (a range is a like the selection but invisible)
				range.selectNodeContents(el);//Select the entire contents of the element with the range
				range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
				selection = window.getSelection();//get the selection object (allows you to change selection)
				selection.removeAllRanges();//remove any selections already made
				selection.addRange(range);//make the range you have just created the visible selection
			} else if(document.selection)	{	//	для IE8-
				range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible)
				range.moveToElementText(el);//Select the entire contents of the element with the range
				range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start
				range.select();//Select the range (make it the visible selection
			}
		}
		
	}
	</script>
	</head>
	
	<body>
		<div id='main' contenteditable="true">
	</div>
	
	</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 16.01.2016, 16:56
Аватар для balov_bohdan
Новичок на форуме
Отправить личное сообщение для balov_bohdan Посмотреть профиль Найти все сообщения от balov_bohdan
 
Регистрация: 12.01.2016
Сообщений: 6

Большое спасибо за ответы.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как очистить текст от символов prope Общие вопросы Javascript 6 07.01.2014 22:05
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25
Решение проблемы кодировок для AJAX и PHP без iconv (cp1251 в AJAX) Serge Ageyev AJAX и COMET 10 24.04.2013 20:48
Как сделать как в JQ? faforty Общие вопросы Javascript 8 14.11.2011 00:35
Как узнать, присутствует ли в окне полоса прокрутки или нет? возжаждавший Элементы интерфейса 6 12.03.2010 23:00