Добавление новых INPUT по нажатию ENTER

[paveltkachev]

Я написал 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]

$('#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]

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

[paveltkachev]

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

[Aetae]

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

[Rise]

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

[paveltkachev]

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

[Aetae]

paveltkachev,

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

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

[paveltkachev]

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

[paveltkachev]

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