Question

我不是程序员，我想将SPAN转换为INPUT。我有下一个代码，但它并不是我正在搜索的内容。它只允许我删除单词，我想将SPAN完全转换为INPUT，因为我有一个Firefox附加组件可以通过快捷方式遍历所有输入。

 var i,
 list = document.querySelectorAll(".emailids") 
 for (i = 0; i < list.length; ++i) 
 { list[i].setAttribute('contenteditable', 'true');
 }

Answer 1

您需要做的是更改outerHTML属性，如下所示：

 var i,
       list = document.querySelectorAll(".emailids") 
    for (i = 0; i < list.length; ++i) 
    {  list[i].outerHTML="<input type='text' value='"+list[i].innerHTML+"' />";
       list[i].innerHTML=""
    }

小提琴：http://jsfiddle.net/Vulpus/SvL9X/1/
这样做会改变所有outerHTML跨度，并将其值设置为innerHTML或跨度的内容。然后将innerHTML设置为空，以避免输入的子项

Answer 2

您可以使用outerHTML将.emailids替换为输入。

list[i].outerHTML = '<input type="text" value="" />';

由于您希望.emailids的文字内容为输入的value，您可以使用

list[i].textContent

但是textContent可以包含引号，它也会分隔value属性，因此您必须将其转义：

list[i].textContent.replace(/"/g,'&quot;')

完整代码：

var list = document.querySelectorAll(".emailids") 
for (var i = 0, l=list.length; i < l; ++i) {  
    list[i].outerHTML = 
        '<input type="text" value="'
        +list[i].textContent.replace(/"/g,'&quot;')
        +'" />';
}

Demo

将SPAN转换为输入字段？

2 个答案: