Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Передача текста из input в label (https://javascript.ru/forum/events/17910-peredacha-teksta-iz-input-v-label.html)

Eclipse 08.06.2011 16:14

Передача текста из input в label
 
Здравствуйте, уважаемые.
Помогите пожалуйста решить такую небольшую проблему. Как мне посимвольно, т.е. при наборе текста в input, передать его в lable. Так сказать на лету. Приведите пожалуйста пример, как это реализовать!?
Заранее спасибо за ответ.

nikita.mmf 08.06.2011 19:05

<label for="input"></label>
<input type="text" id="input" />


(function ( input ) {
	var label, oldValue = '';
	var labels = document.getElementsByTagName("label");
	for ( var j = 0; label = labels[j++]; ) {
		if ( label.getAttribute("for") == input.id ) { break; }
	}
	if ( !label ) { return; }
	
	function handler() {
		if ( input.value != oldValue ) {
			oldValue = value;
			label.innerHTML = "";
			label.appendChild( document.createTextNode( value ) );
		}
	};
	
	if ( input.addEventListener ) {
		input.addEventListener( "keyup", handler, false );
		input.addEventListener( "keydown", handler, false );
	} else if ( input.attachEvent ) {
		input.attachEvent( "onkeyup", handler );
		input.attachEvent( "onkeydown", handler );
	} else {
		input['onkeyup'] = input['onkeydown'] = handler;
	}
	
})( document.getElementById('input') );

рони 08.06.2011 19:40

nikita.mmf,
На всякий случай строка 11 и 13 input.value

Eclipse 08.06.2011 20:03

nikita.mmf, большое спасибо!!!

nikita.mmf 08.06.2011 20:13

рони,
спасибо. Действительно недописал.

evgh 09.06.2011 03:51

а я думал решение проще :cray: , как то так....
<label id="input"></label>
<input type="text" onkeydown="document.getElementById('input').innerHTML=this.value" />

рони 09.06.2011 09:48

evgh,
На всякий случай onkeyup не забыли?
И код указанный выше можно использовать для множества инпутов слегка дополнив плюс ненужно вписывать код внутри тегов.

evgh 09.06.2011 10:54

рони,
Цитата:

На всякий случай onkeyup не забыли?
нет, не забыл :D

Цитата:

И код указанный выше можно использовать для множества инпутов слегка дополнив
мой тоже, всего лишь надо слегка дополнить :p

Цитата:

плюс ненужно вписывать код внутри тегов.
я для краткости, мой код так же можно вынести в отдельный файл, запретов нет, патентов тоже :p

nikita.mmf 09.06.2011 18:22

введите в инпут например <div>!!!</div>

evgh 09.06.2011 19:14

nikita.mmf,
не знаю зачем вводить теги, но если ввести то инпут "блокируется", хз почему.


Часовой пояс GMT +3, время: 15:30.