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,
не знаю зачем вводить теги, но если ввести то инпут "блокируется", хз почему.

trikadin 10.06.2011 07:43

Цитата:

Сообщение от evgh
хз почему

Потому что innerHTML. Следовательно, теги будут добавляться в этот <label>. Это будет вызывать ошибки в коде.

gen552 12.06.2011 16:14

А почему не работает innerHTML через attachEvent в IE. Выдаёт "undefined".?

<div id="textView"></div>
<input type="text" id="textEnter" />

var textView = document.getElementById('textView');
    var textEnter = document.getElementById('textEnter');
    
        if (textEnter.addEventListener)
            {          
                textEnter.addEventListener('keyup', myFoo, false);            
                textEnter.addEventListener('keydown', myFoo, false); 
            }
            
        else if (textEnter.attachEvent)
            {            
                textEnter.attachEvent('onkeyup', myFoo);            
                textEnter.attachEvent('onkeydown', myFoo);                 
            }            
                        
        function myFoo ()
            {
                textView.innerHTML = this.value;
            }

melky 13.06.2011 16:05

бред. даже в гугле такого нет.

щас через вайн зайду в 8 IE и проверю.

какой IE

<div id="textView"></div>
<input type="text" id="textEnter" />

<script>

var textView = document.getElementById('textView');
    var textEnter = document.getElementById('textEnter');
              
                textEnter.attachEvent('onkeyup', myFoo);            
                textEnter.attachEvent('onkeydown', myFoo);                 
                      
                        
        function myFoo ()
            {
                textView.innerHTML = event.srcElement.value;
            }

</script>


"undefined" - не innerHTML, а "this.value"

вместо this используй для него event.srcElement

Маэстро 14.06.2011 11:29

Еще есть приколисты (люди) которые работают с полем INPUT исключительно мышкой. То есть, копируют в него текст (мышкой) из буфера, либо выделяют текст в поле (мышкой) и удаляют часть текста (мышкой). И надо предусмотреть соответствующее изменение в label.

melky 14.06.2011 15:11

такие умельцы редко попадаются.
как и те,которые сжимают HTML,CSS,JS в релиз-версии.

(конечно,имея под рукой читабельные добрые сорцы)

очень редко...

Маэстро 14.06.2011 22:50

Цитата:

Сообщение от melky (Сообщение 108616)
такие умельцы редко попадаются.
...
очень редко...

Редко, да не очень. Я работаю с организацией, в которой 5000 человек. Из них 50 теток работает именно так (только мышкой). И любая из этих может закатить таакой скандал по поводу того, что так ей удобно, а так неудобно!!! Поэтому рекомендую учитывать.
Кстати, о поисковой странице Гугл: неоднократно видел как люди не нажимают клавишу Enter, а мышкой жмут кнопку "Поиск" (перед этим скопировав поисковое слово также из буфера). И убедить их нажимать клавиши на клавиатуре бесполезно...


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