我想知道為什么每當我將 <input> 標簽切換到 <p> 標簽時，我的字符計數器就不會出現根本不。我希望 Characters remaining: 部分不要位于 <input> 標記內。我嘗試了很多方法來解決這個問題，但都碰壁了，我只需要另一雙眼睛來看看這個問題。我做錯了什么以及如何解決這個問題？ JSFiddle 提供供參考。https://jsfiddle.net/2b38k9zt/var txtBoxRef = document.querySelector("#txtBox");var counterRef = document.querySelector("#counterBox");txtBoxRef.addEventListener("keydown",function(){ var remLength = 0; remLength = 0 + parseInt(txtBoxRef.value.length); if(remLength < 0) { txtBoxRef.value = txtBoxRef.value.substring(0, 200); return false; } else if(remLength > 200) { counterRef.style.color = "red"; } counterRef.value = "Characters remaining: " + remLength + "/200";},true);<textarea style="width: 600px;" id="txtBox"></textarea><input type="text" id="counterBox"/>
2 回答
PIPIONE
TA貢獻1829條經驗 獲得超9個贊
將您的輸入設置為 p 元素并更改此行
counterRef.value = "Characters remaining: " + remLength + "/200";
到
counterRef.innerHTML = "Characters remaining: " + remLength + "/200";
LEATH
TA貢獻1936條經驗 獲得超7個贊
input 標簽具有 value 屬性，而 p 標簽應使用 textContent 屬性：
var txtBoxRef = document.querySelector("#txtBox");
var counterRef = document.querySelector("#counterBox");
var pRef = document.querySelector("#pBox");
txtBoxRef.addEventListener("keydown",function(){
var remLength = 0;
remLength = 0 + parseInt(txtBoxRef.value.length);
if(remLength < 0) {
txtBoxRef.value = txtBoxRef.value.substring(0, 200);
return false;
} else if(remLength > 200) {
counterRef.style.color = "red";
}
pRef.textContent = "Characters remaining: " + remLength + "/200";
},true);
<textarea style="width: 600px;" id="txtBox"></textarea>
<input type="text" id="counterBox"/>
<p id='pBox'></p>
- 2 回答
- 0 關注
- 164 瀏覽
添加回答
舉報
0/150
提交
取消