Показать сообщение отдельно
  #1 (permalink)  
Старый 08.03.2015, 21:30
Профессор
Отправить личное сообщение для alexan0308 Посмотреть профиль Найти все сообщения от alexan0308
 
Регистрация: 11.04.2011
Сообщений: 207

Превратить span в текстовое поле кликом и обратно
Здрасте уважаемые форумчане!
Появилась задача - текстовый спан при клике ( получении фокуса ) должен превращаться в текстовый инпут. Изначально там инпута ну никак нету. При потери фокуса он должен превращаться обратно в текст.

начал сгоряча велосипедить. проблема в том, что при втором клике инпут
начинает пухнуть. Как лучше сделать? Есть ли готовое решение, дайте ссыльку плиз.

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 );

Последний раз редактировалось alexan0308, 08.03.2015 в 23:26.
Ответить с цитированием