Question

我正在尝试显示多个文本区域中剩余的字符数。虽然我对文本区域有不同的ID，但最大长度仅提示第二个文本区域而不是第一个文本区域。我的代码如下所示

<textarea id="txtBox"></textarea> 
    <input type="text" id="counterBox"/>
        <script>
            var txtBoxRef = document.querySelector("#txtBox");
            var counterRef = document.querySelector("#counterBox");
            txtBoxRef.addEventListener("keydown",function(){
            var remLength = 0;
            remLength = 160 - parseInt(txtBoxRef.value.length);
            if(remLength < 0)
            {
                txtBoxRef.value = txtBoxRef.value.substring(0, 160);
                return false;
            }
            counterRef.value = remLength + " characters remaining...";
            },true);
        </script>

<textarea id="txtBox1"></textarea> 
    <input type="text" id="counterBox1"/>
            <script>
                var txtBoxRef = document.querySelector("#txtBox1");
                var counterRef = document.querySelector("#counterBox1");
                txtBoxRef.addEventListener("keydown",function(){
                var remLength = 0;
                remLength = 160 - parseInt(txtBoxRef.value.length);
                if(remLength < 0)
                {
                txtBoxRef.value = txtBoxRef.value.substring(0, 160);
                return false;
                }
                counterRef.value = remLength + " characters remaining...";
                },true);
            </script>

结果如下（我有什么）：

我想要的是什么：

Answer 1

看起来变量txtBoxRef和counterRef位于同一范围区域，您声明了两次。

<textarea id="txtBox"></textarea> 
    <input type="text" id="counterBox"/>
        <script>
            var txtBoxRef = document.querySelector("#txtBox");
            var counterRef = document.querySelector("#counterBox");
            txtBoxRef.addEventListener("keydown",function(){
            var remLength = 0;
            remLength = 160 - parseInt(txtBoxRef.value.length);
            if(remLength < 0)
            {
                txtBoxRef.value = txtBoxRef.value.substring(0, 160);
                return false;
            }
            counterRef.value = remLength + " characters remaining...";
            },true);
        </script>

<textarea id="txtBox1"></textarea> 
    <input type="text" id="counterBox1"/>
            <script>
                var txtBoxRef1 = document.querySelector("#txtBox1");
                var counterRef1 = document.querySelector("#counterBox1");
                txtBoxRef1.addEventListener("keydown",function(){
                var remLength = 0;
                remLength = 160 - parseInt(txtBoxRef1.value.length);
                if(remLength < 0)
                {
                txtBoxRef1.value = txtBoxRef1.value.substring(0, 160);
                return false;
                }
                counterRef1.value = remLength + " characters remaining...";
                },true);
            </script>

检查Fiddle

Answer 2

试试这个：

<textarea id="txtBox"></textarea>
<input type="text" id="counterBox"/>
<script>
    var txtBoxRef=document.querySelector("#txtBox");
    var counterRef=document.querySelector("#counterBox");
    txtBoxRef.addEventListener("keyup", function(){
        var remLength=0;
        remLength=160 - parseInt(txtBoxRef.value.length);
        if(remLength < 0){
            txtBoxRef.value=txtBoxRef.value.substring(0, 160);
            return false;
        }
        counterRef.value=remLength + " characters remaining...";
    }, true);
</script>
<textarea id="txtBox1"></textarea>
<input type="text" id="counterBox1"/>
<script>
    var txtBoxRef1=document.querySelector("#txtBox1");
    var counterRef1=document.querySelector("#counterBox1");
    txtBoxRef1.addEventListener("keyup", function(){
        var remLength=0;
        remLength=160 - parseInt(txtBoxRef1.value.length);
        if(remLength < 0){
            txtBoxRef1.value=txtBoxRef1.value.substring(0, 160);
            return false;
        }
        counterRef1.value=remLength + " characters remaining...";
    }, true);
</script>

如果您仔细考虑，可以优化您的代码。

使用php和Javascript的多个文本区域的最大长度

2 个答案: