Здрасте уважаемые форумчане!
Появилась задача - текстовый спан при клике ( получении фокуса ) должен превращаться в текстовый инпут. Изначально там инпута ну никак нету. При потери фокуса он должен превращаться обратно в текст.
начал сгоряча велосипедить. проблема в том, что при втором клике инпут
начинает пухнуть. Как лучше сделать? Есть ли готовое решение, дайте ссыльку плиз.
var el = document.getElementById( "term1" );
el.addEventListener('click', function() {
var inputs = el.getElementsByTagName('input');
if ( inputs.length > 0 ) return; // уже есть инпут, выходим
var newInput = document.createElement('input');
newInput.type = 'text';
newInput.value = el.innerHTML;
newInput.maxLength = 1;
newInput.setAttribute('size',1); // HTML attribute
newInput.style.width = '12px'; // CSS property
el.innerHTML = "";
el.appendChild( newInput );
newInput.focus();
newInput.select();
// новоявленному инпуту добавляем событие, когда он потеряет фокус и пропадет
newInput.addEventListener('blur', function() {
// ищем инпут и удаляем его, забрав его значение
var inputs = el.getElementsByTagName('input');
var value = inputs[0].value;
el.removeChild( inputs[0] );
el.innerHTML = value;
}, false );
}, false );