javascript - 当单击 JavaScript 中的复选框时，文本区域的字符数对动态字符限制长度？

Question

我有一个文本区域，该文本区域的字符限制默认为 620。当单击文本区域下方的复选框时，我想将文本区域字符限制更改为 268。并且它还应该显示 620/已使用的字符，并且也更改为 268/已使用的字符。

当选中复选框时，我已将文本区域 fomr 的字符限制从 620 动态更改为 268，当再次取消选中该复选框时，字符限制将显示 620，工作正常。但是当我尝试获取 textrea 的值时，它总是采用 620，因为我添加了默认值。

在消息中允许使用 unicode

        function myFunction(chk) {
        var targetElement = document.getElementById('totalchar');
        console.log(targetElement)
          if (chk.checked){
             targetElement.innerHTML= "268";
          }
          else{
            targetElement.innerHTML="620"
          }
        }
     //use for unicode allow in mesage end.


character count javascript
function counterUpdate(opt_countedTextBox, opt_countBody, opt_maxSize) 
        {

            var countedTextBox = opt_countedTextBox ? opt_countedTextBox : "counttxt";
            var countBody = opt_countBody ? opt_countBody : "countBody";
            var maxSize = opt_maxSize ? opt_maxSize : "totalchar";


            var field = document.getElementById(countedTextBox);

            if (field && field.value.length > maxSize) {
                    field.value = field.value.substring(0, maxSize);
                    alert("Sorry! You have reached your maximum message limit.")
            }
            var txtField = document.getElementById(countBody);
                    if (txtField) {  
                    txtField.innerHTML = field.value.length;
        }
     }

HTML 代码

    <tr class="frmline">
        <td width="19%">Enter Message: </td>
        <td width="22%" colspan="2"><textarea name="txtmsg" id="txtmsg" dispname="Message" onkeyup="counterUpdate(&#39;txtmsg&#39;, &#39;countBody&#39;,&#39;620&#39;)" tagid="txtmsg" onfocusout="counterUpdate(&#39;txtmsg&#39;, &#39;countBody&#39;,&#39;620&#39;);NewLineCharFlag=true;" onblur="counterUpdate(&#39;txtmsg&#39;, &#39;countBody&#39;,&#39;620&#39;);NewLineCharFlag=true;" style="margin-right: 25px; width: 250px; height: 150px;resize:none;" onfocus="counterUpdate(&#39;txtmsg&#39;, &#39;countBody&#39;,&#39;620&#39;);NewLineCharFlag=false;" rows="10" validations="b" cols="20"></textarea> <span id="totalchar"></span>/<span id="countBody" class="counter1">0</span>*
        </td>
      </tr>
     <tr class="frmline">
        <td width="19%">Allow Unicode: </td>
        <td width="22%"><input type="checkbox" name="allowunicode" onchange="myFunction(this)" id="allowunicode" /></td>
        <td width="59%">&nbsp;</td>
      </tr>

Answer 1

HTML

<textarea id="textarea1">

</textarea>
<br>
<p>Text limit is : <span id="text-limit">620</span></p>
<p>Character entered: <span id="charEntered"></span></p>

<input type="checkbox" id="check1"/>

Javascript

const check1 = document.getElementById('check1');
const limitVal = document.getElementById('text-limit');
const textArea1 = document.getElementById('textarea1');
const charEntered = document.getElementById('charEntered');

check1.addEventListener('click', () => {
  if (check1.checked) {
    limitVal.innerHTML = '268';
    checkMaxLimit(268);
  } else {
    limitVal.innerHTML = '620';
    checkMaxLimit(620);
  }
});

function checkMaxLimit(limit) {
  if (textArea1.value.length > limit) {
    alert('Maximum value reached');
    textArea1.value = textArea1.value.slice(0, limit);
  }
}

textArea1.addEventListener('keyup', () => {
  charEntered.innerHTML = textArea1.value.length;
  checkMaxLimit(+limitVal.innerHTML);

});

或者您可以检查 stackblitz - https://stackblitz.com/edit/js-vxhkpe

我没有涵盖代码中的极端情况，也没有处理装饰性的东西，比如如果违反最大长度则显示 * 符号:)