多輸入或Textarea中的結果預覽未運行

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。 由於您已經使用過“ inputTXT”，因此您將不得不使用不同的id，但看起來您正在使用該input標簽的目的與先前使用的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> 

如果要將相同的效果/屬性應用於多個元素，請使用屬性類 。