Question

我有代码在表单上显示代码标记的预览。

如果您只使用一个输入，则可以。但是如果再添加一个输入，那么它就不会运行。

我的代码：

<style>
.text_edit, #prevTxt {
    width: 400px;
    height:200px;
    border: solid 1px #D4DEDE;
    padding: 10px; 
}
</style>

<script type="text/javascript">
    function prevTxt() {
        var textArea = document.getElementById('inputTxt');
        var div = document.getElementById('prevTxt');
        var text = textArea.value;
        text = text.replace(/\n/gi, "<br />");
        div.innerHTML = text;
    }
    </script>

<textarea class="text_edit" id="inputTxt" onkeyup="prevTxt()"></textarea>

<div id="prevTxt" style="background: #E7ECEC; line-height: 1.1em;"></div>

如果我添加此代码，则无法运行

<input class="text_edit" id="inputTxt" onkeyup="prevTxt()" />

如何更改代码？

Answer 1

您应该使用唯一的ID。您可以在不使用ID的情况下重写代码：

<textarea class="text_edit" onkeyup="prevTxt(this)"></textarea>
<input class="text_edit" onkeyup="prevTxt(this)" />


function prevTxt(el) {
    var div = document.getElementById('prevTxt');
    var text = el.value;
    text = text.replace(/\n/gi, "<br />");
    div.innerHTML = text;
}

Answer 2

您不能在单个页面上使用重复的ID。由于您已经使用了＆＃34; inputTXT＆＃34;，因此您必须使用不同的ID，但看起来您使用该输入标记的目的与之前使用的textarea相同。您将需要删除或重命名其中一个。

为id选择你想要的任何东西。例如，这将起作用：

<input class="text_edit" id="inputTxtInput" onkeyup="prevTxt()" />

Answer 3

HTML中的属性ID必须是唯一的。如果要创建另一个元素标记，则必须更改ID。例如：

<textarea class="text_edit" id="inputTxt" onkeyup="prevTxt()"></textarea>
<div id="prevTxt" style="background: #E7ECEC; line-height: 1.1em;">
  <input id="inputTxt2"/>
  <input id="inputTxt3"/>
  <input id="inputTxt4"/>
</div>

如果要对多个元素应用相同的效果/属性，请使用属性类。

结果预览多输入或Textarea未运行

3 个答案: