2

Есть возможность при клике на DIV вернуть его как TEXTAREA типа аля

this.tagName.replace(this.tagName, "textarea");
4
  • jQuery может делать так: $('#myDiv').replaceWith('<textarea id="myDiv">'+$('#myDiv').html()+'</textarea>');
    – Sh4dow
    23 мар 2012 в 11:50
  • 1
    @Sh4dow, JS тоже :D
    – Oleg
    23 мар 2012 в 12:06
  • 1
    @exec я в курсе) Не люблю велосипеды в продакшене)
    – Sh4dow
    23 мар 2012 в 12:13
  • @Sh4dow, нафига .html()? А ещё есть вариант, что там встретится </textarea> и этому коду крышка. Надо так: $div.replaceWith($('<textarea>).val($div.text())).
    – Qwertiy
    18 сен 2021 в 20:39

4 ответа 4

4

Насколько я знаю tagName - read only свойство, соответственно - нет, нельзя.

3
  • Печально... Теперь не буду париться)
    – Palmervan
    23 мар 2012 в 11:36
  • Философия такого поведения на наглядном примере псевдокода: cat = new Cat(); // создаем div cat.class = 'Cat'; // устанавливаем "тэг" // если изменить какой-либо атрибут и, например // сказать коту - ты собака, ничего не сделав для того // что-бы он ей стал - естественно он останется котом cat.class = 'Dog'; Ну а работает именно так потому, что tagName - это, на уровне нативной реализации - геттер, сеттера попросту не существует. PS: правда под новые браузеры заявленный вами функционал можно реализовать, если интересно напишу без проблем.
    – user3545
    23 мар 2012 в 17:46
  • @AlexWindHope спасибо, но в принципе проблема решилась другим подходом.
    – Palmervan
    23 мар 2012 в 18:03
1

Можно так:

<div id="parent">
<div id="child">
</div>
</div>
<script>
var textarea=document.createElement("textarea");
parent.replaceChild(texarea,child);
</script>
2
  • 1
    Ну код можно дороботать но суть такая!
    – Rules
    23 мар 2012 в 13:58
  • Суть была лиш в замене одного tagName на другой! <div>Some Text</div> должен был стать <textarea>Some Text</textarea> При продолжительном трахе мозга стало понятно что этого не сделать. Уже все ревлизовано как на примере @Sh4dow только на нативном js.
    – Palmervan
    23 мар 2012 в 14:04
0
tags2.outerHTML="<"+tag+">"+tag2.innerHTML+"</"+tag+">";
1
  • 1
    Только не innerHTML, а textContent.
    – Qwertiy
    18 сен 2021 в 20:33
0

Можно сделать сам div редактируемым выставив ему contentEditable:

document.getElementById('div').addEventListener('click', function (e) {
  e.currentTarget.contentEditable = true
  e.currentTarget.focus()
})
<div id=div>
  Some text <b>goes</b> here
</div>

Впрочем, не вижу никаких причин делать это по клику - можно просто прописать в разметке:

<div contenteditable>
  Some text <b>goes</b> here
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.