时间戳

首页 > 解决方案 > 当单击javascript中的复选框时，动态字符限制长度上的textarea的字符数？

javascript - 当单击javascript中的复选框时，动态字符限制长度上的textarea的字符数？

问题描述

在此处输入图像描述我有一个 textrea 并且该 textarea 的字符限制默认为 620。当单击 textarea 下方的复选框时，我想将 textarea 字符限制更改为 268。它还应该显示 620/used 字符，并更改为 268/used 字符。

当检查复选框时，我将Textarea 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>

标签： javascriptconditional-statements

解决方案

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

我没有覆盖我的代码中的极端情况，也没有处理像在最大长度违规时显示 * 符号这样的装饰性内容:)

推荐阅读