Форум

iNfantry · #1 (**permalink**) 14.05.2012, 01:37

Здача очень банальная, просто сам пока не сталкивался - как проще всего ограничить количество символов которые можно ввести в textarea? Я конешно могу с помощью хитрых махинаций жс сделать это сам, но не хочется изобретать велосипед. Стандартного атрибута который задает максимальное количество символов у этого тэга нет, как я понял?

bot87 · #2 (**permalink**) 14.05.2012, 06:56

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

Я конешно могу с помощью хитрых махинаций жс сделать это сам, но не хочется изобретать велосипед.
Стандартного атрибута который задает максимальное количество символов у этого тэга нет, как я понял?

http://htmlbook.ru/html/textarea/maxlength

<textarea></textarea>

<script>

textarea=document.getElementsByTagName('textarea')[0]

function handler(){
	if(textarea.value.length>5){
	textarea.disabled = true;
	}else{
	textarea.disabled = false;
	}
	
}

if(textarea.addEventListener){
	textarea.addEventListener('keyup',handler,false)
	
}
else{
	textarea.attachEvent('onkeyup',handler)
	
	}
</script>

Нельзя убрать симолы и атрибут readonly не помогает.
Может сдесь поможет return false,но я не знаю как его влепить

devote · #3 (**permalink**) 14.05.2012, 11:35

<!DOCTYPE html>
<html>
	<head>
	    <title></title>
	</head>
	<body>
		<div>Вводить можно только цифры, максимум 10 цифр</div>
		<input data-max-length="10" data-allow-input="/[0-9]/i"><br />
		<div>Вводить можно что угодно максимум 100 символов</div>
		<textarea data-max-length="100" style="width: 400px;"></textarea><br />
		<div>Вводить можно сколько угодно, только латиницу</div>
		<textarea data-allow-input="/[a-z\s\x0D]/i" style="width: 400px;"></textarea>

		<script type="text/javascript">

			(function() {

				var tags = [ "textarea", "input" ],
					i, k, tag, elem, elems,
					eventType = document.addEventListener ? [ "", "addEventListener" ] : [ "on", "attachEvent" ];

				for( i = 0; tag = tags[ i++ ]; ) {

					elems = document.getElementsByTagName( tag );

					for( k = 0; elem = elems[ k++ ]; ) {

						if ( elem.getAttribute( "data-allow-input" ) || elem.getAttribute( "data-max-length" ) ) {

							elem.setAttribute( "data-store-value", elem.value );

							elem[ eventType[ 1 ] ]( eventType[ 0 ] ? "onpaste" : "input", function( e ) {

								e = e || window.event;

								var self = e.target || e.srcElement;

								if ( e.type === "input" && !self.keyPressed ) {
									self.value = self.getAttribute( "data-store-value" );
								}

								self.keyPressed = false;

								return false;

							}, false );

							elem[ eventType[ 1 ] ]( eventType[ 0 ] + "keyup", function( e ) {
								e = e || window.event;

								var self = e.target || e.srcElement;

								self.setAttribute( "data-store-value", self.value );
							}, false );

							elem[ eventType[ 1 ] ]( eventType[ 0 ] + "keypress", function( e ) {

								e = e || window.event;

								if ( e.which == null ) {
									e.which = e.charCode != null ? e.charCode : e.keyCode;
								}

								var m, self = e.target || e.srcElement,
									allow = self.getAttribute( "data-allow-input" ),
									maxLength = self.getAttribute( "data-max-length" );

								if ( allow && ( m = /^\/(.*)\/(?:([igm]+))?$/.exec( allow ) ) ) {
									allow = new RegExp( m[ 1 ], m[ 2 ] );
								} else if ( allow ) {
									allow = new RegExp( "(" + allow + ")", "g" );
								}

								if ( !( e.which == 9 || e.which == 8 || e.which == 0 &&
									/[\x21\x22\x23\x24\x25\x26\x27\x28\x2E]/.test( String.fromCharCode( e.keyCode ) ) ) &&
									( ( allow && !allow.test( String.fromCharCode( e.which ) ) ) ||
										( maxLength && self.value.length + 1 > maxLength ) ) ) {
									if ( e.preventDefault ) {
										e.preventDefault();
									} else {
										e.returnValue = false;
									}
									return false;
								}

								self.keyPressed = true;

							}, false );
						}
					}
				}

			})();

		</script>
	</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript