为了账号安全,请及时绑定邮箱和手机立即绑定

我该如何让我的字符计数器不出现在输入框中呢?

我该如何让我的字符计数器不出现在输入框中呢?

慕后森 2023-12-19 16:22:11
我想知道为什么每当我将 <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";


查看完整回答
反对 回复 2023-12-19
?
LEATH

TA贡献1936条经验 获得超6个赞

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>


查看完整回答
反对 回复 2023-12-19
  • 2 回答
  • 0 关注
  • 115 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信