Показать сообщение отдельно
  #4 (permalink)  
Старый 17.08.2012, 19:05
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Можно поиграться с этой заготовкой, ну или дорабатывать кастомный селект
<select>
	<option>z - ввести</option>
	<option>Enter - запомнить</option>
</select>


<script>

window.onload = function () {
	var sel = document.getElementsByTagName('select')[0];
	sel.style.cssText = 'position: relative; z-index: 101';
	var inp = document.createElement('input');
	inp.style.cssText = 'position: absolute; z-index: 100;';
	var coords = sel.getBoundingClientRect();
	inp.style.top = coords.top + 'px';
	inp.style.left = coords.left + 'px';
	inp.style.width = coords.right - coords.left - 18 + 'px';
	inp.style.height = 18 + 'px';
	document.body.appendChild(inp);
	
	sel.onclick = function () {
		inp.style.zIndex = 100;
		inp.value = '';
	}
	sel.onkeyup = function (e) {
		e = e || event;
		if (e.keyCode == 90) {//Z
			inp.style.zIndex = 102;
			inp.focus();
		}
	}
	inp.onkeyup = function (e) {
		e = e || event;
		if (e.keyCode == 13) {
			var opt = document.createElement('option');
			opt.innerHTML = inp.value;
			sel.appendChild(opt);
			inp.value = '';
			inp.style.zIndex = 100;
			sel.selectedIndex = sel.options.length - 1;
			sel.focus();
		}
	}
	
}
</script>

PS: для инпута можно display: none делать, так покрасившей будет

Последний раз редактировалось bes, 17.08.2012 в 19:18.
Ответить с цитированием