Показать сообщение отдельно
  #4 (permalink)  
Старый 12.01.2016, 20: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>
Ответить с цитированием