Превратить 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,
строка 23 зачем искать дважды (первый раз строка 4) если это this.
<span id="term1">1</span>
<script>
var el = document.getElementById("term1"),
inputs = el.getElementsByTagName("input"),
newInput;
el.addEventListener("click", function() {
if (inputs.length > 0) return;
if (!newInput) {
newInput = document.createElement("input");
newInput.type = "text";
newInput.maxLength = 1;
newInput.setAttribute("size", 1);
newInput.style.width = "12px";
newInput.addEventListener("blur", function() {
el.removeChild(this);
el.innerHTML = this.value ;
}, false)
}
newInput.value = el.innerHTML;
el.innerHTML = "";
el.appendChild(newInput);
newInput.focus();
newInput.select()
}, false);
</script>
|
Ага здорово! :)
Плюсануть карму, к сожалению, пока не могу (уже плюсовал последний раз). |
Несколько полей
А как быть с несколькими полями?
<span class="dynamic">1</span>
<span class="dynamic">2</span>
<span class="dynamic">3</span>
<span class="dynamic">4</span>
<span class="dynamic">5</span>
<script>
var elems = document.getElementsByClassName("dynamic");
for (var i=0; i<elems.length; i++) {
var el = elems[i];
var inputs = el.getElementsByTagName("input"), newInput;
el.addEventListener("click", function() {
if (inputs.length > 0) return;
if (!newInput) {
newInput = document.createElement("input");
newInput.type = "text";
newInput.maxLength = 1;
newInput.setAttribute("size", 1);
newInput.style.width = "12px";
newInput.addEventListener("blur", function() {
el.removeChild(this);
el.innerHTML = this.value ;
}, false)
}
newInput.value = el.innerHTML;
el.innerHTML = "";
el.appendChild(newInput);
newInput.focus();
newInput.select()
}, false);
};
</script>
|
alexan0308,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body><span class="dynamic">1</span>
<span class="dynamic">2</span>
<span class="dynamic">3</span>
<span class="dynamic">4</span>
<span class="dynamic">5</span>
<script>
var elems = document.getElementsByClassName("dynamic"), newInput;
for (var i=0; i<elems.length; i++) {
var el = elems[i];
el.addEventListener("click", function() {
var inputs = this.getElementsByTagName("input");
if (inputs.length > 0) return;
if (!newInput) {
newInput = document.createElement("input");
newInput.type = "text";
newInput.maxLength = 1;
newInput.setAttribute("size", 1);
newInput.style.width = "12px";
newInput.addEventListener("blur", function() {
newInput.parentNode.innerHTML = newInput.value ;
}, false)
}
newInput.value = this.innerHTML;
this.innerHTML = "";
this.appendChild(newInput);
newInput.focus();
newInput.select()
}.bind(el), false);
};
</script>
</body>
</html>
|
Даа, трудно старому паскалисту биндить... сенкс ))
|
Еще вопрос ( простите за дотошность, но наверно важно ) : Не происходит ли утечки памяти при
newInput.parentNode.innerHTML = newInput.value;Ведь просто исчезает спан newInput вместе со своим событием "blur" ? |
Цитата:
|
| Часовой пояс GMT +3, время: 16:22. |