08.03.2015, 21:30
|
|
Профессор
|
|
Регистрация: 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.
|
|
08.03.2015, 21:52
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,133
|
|
|
|
|
08.03.2015, 23:25
|
|
Профессор
|
|
Регистрация: 11.04.2011
Сообщений: 207
|
|
|
Рони, спасибо. Посмотрел, навело на мысли. Подправил код, вроде все работает. Но наверно еще можно шлифовать, не?
|
|
08.03.2015, 23:49
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,133
|
|
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>
Последний раз редактировалось рони, 08.03.2015 в 23:55.
|
|
09.03.2015, 09:31
|
|
Профессор
|
|
Регистрация: 11.04.2011
Сообщений: 207
|
|
Ага здорово! 
Плюсануть карму, к сожалению, пока не могу (уже плюсовал последний раз). |
|
09.03.2015, 12:43
|
|
Профессор
|
|
Регистрация: 11.04.2011
Сообщений: 207
|
|
|
Несколько полей
А как быть с несколькими полями?
<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, 09.03.2015 в 12:53.
|
|
09.03.2015, 12:56
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,133
|
|
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>
|
|
09.03.2015, 12:59
|
|
Профессор
|
|
Регистрация: 11.04.2011
Сообщений: 207
|
|
|
Даа, трудно старому паскалисту биндить... сенкс ))
|
|
11.03.2015, 08:50
|
|
Профессор
|
|
Регистрация: 11.04.2011
Сообщений: 207
|
|
Еще вопрос ( простите за дотошность, но наверно важно ) : Не происходит ли утечки памяти при
newInput.parentNode.innerHTML = newInput.value;
Ведь просто исчезает спан newInput вместе со своим событием "blur" ? |
|
11.03.2015, 09:53
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,133
|
|
Сообщение от alexan0308
|
Еще вопрос ( простите за дотошность, но наверно важно ) : Не происходит ли утечки памяти при
newInput.parentNode.innerHTML = newInput.value;
Ведь просто исчезает спан newInput вместе со своим событием "blur" ?
|
куда это он исчезает если его можно вставить в любой момент и можно создать вне click один раз. строка 22 срабатывает всего 1 раз.пока есть ссылка на элемент он не исчезнет
Последний раз редактировалось рони, 11.03.2015 в 09:56.
|
|
|
|
