Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Добавление новых INPUT по нажатию ENTER (https://javascript.ru/forum/jquery/52422-dobavlenie-novykh-input-po-nazhatiyu-enter.html)

paveltkachev 18.12.2014 16:25

Добавление новых INPUT по нажатию ENTER
 
Я написал html-код

<ol id="list">
	<li><input class="list" maxlength="30"></li>
</ol>


к нему добавил JavaScript

$('.list').keypress(function(event){
	var keyCode = event.keyCode ? event.keyCode :
	event.charCode ? event.charCode :
	event.which ? event.which : void 0;

	if(keyCode == 13)
	{
		$('#list').append('<li><input class="list" maxlength="30"></li>');
	}	
});


В итоге когда я нажимаю на ENTER, то появляется новое поле INPUT. Но если я нажимаю на ENTER внутри добавленного поля, то скрипт это событие не обрабатывает.

Как сделать так, чтобы добавление по ENTER работало и для имеющегося изначально и для добавляемых INPUT?

Aetae 18.12.2014 17:24

$('#list').on('keypress', '.list', function(event){ //вешаем на верхний контейнер, но события ожидаем именно от '.list'
    var keyCode = event.keyCode || event.charCode || event.which;
 
    if(keyCode == 13)
    {
      $( '<li><input class="list" maxlength="30"></li>' ).insertAfter( this ).find('.list').focus(); //возможно не нужная правка)
    }  
});

paveltkachev 18.12.2014 17:40

Спасибо! Вы сразу и проблему фокуса в новом INPUT решили.

paveltkachev 18.12.2014 17:57

Может подскажите, как вычислять количество введённых символов в активном INPUT?

Aetae 18.12.2014 20:18

$('#list').on('input', '.list', function(event){ 
    var length = this.value.length;
});

Rise 19.12.2014 06:14

Aetae, говорят event.which кроссбраузерное

paveltkachev 19.12.2014 16:25

А как отловить нажатие Ctrl + Enter?

Aetae 19.12.2014 16:55

paveltkachev,
if(event.ctrlKey && event.which === 13)

Rise, ну и хорошо, мопед не мой.)

paveltkachev 23.12.2014 10:55

Подскажите, пожалуйста, ещё. Как удалить <li><input class="list" maxlength="30"></li>, то есть и input в котором совершаются действия и его родителя, если пользователь нажимал бэкспейс и удалили весь текст и снова нажал бэкспейс? Это ткак в Word, получается.

paveltkachev 24.12.2014 11:28

Подскажите, какой keyCode у кнопок del и backspace?


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