计算多个文本区域中字母的函数

Question

我正在尝试创建一个用于多个文本区域的函数，用于计算里面的字母并将它们显示在标题中。

这是我到目前为止所得到的，我正在尝试将变量传递给函数：

$('[name=messagetext]').keyup(countinput("[name=messagetext]", "#count_messagetext", "#000000"));
$('[name=messagetext]').keydown(countinput("[name=messagetext]", "#count_messagetext", "#000000"));

$('[name=abouttext]').keyup(countinput("[name=abouttext]", "#count_abouttext", "#000000"));
$('[name=abouttext]').keydown(countinput("[name=abouttext]", "#count_abouttext", "#000000"));

function countinput(name, countid, color) {
 var count = $(name).val().length;
 $(countid).text(count);
 if (count >= 170) {
  $(countid).css('color', '#ed7777');
  $(countid).css('font-weight', '600');
 } else {
  $(countid).css('color', color);
  $(countid).css('font-weight', '700');
 }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 style="text-align: center; font-size: 1.7rem; font-weight: 600; color: #414456;">Message (<span id="count_messagetext" value="0">0</span>/100)</h3>
<textarea rows="4" maxlength="100" style="height: auto !important;" name="messagetext" type="text" placeholder="Write your own message"></textarea>

<h3 style="text-align: center; font-size: 1.7rem; font-weight: 600; color: #414456;">About (<span id="count_abouttext" value="0">0</span>/100)</h3>
<textarea rows="4" maxlength="100" style="height: auto !important;" name="abouttext" type="text" placeholder="Write your own message"></textarea>

Answer 1

给你:)

我改的是

它会自动检测 <h3> 我们必须更改颜色，这样您就不会每次都要指定

$( object ).prev('h3')

Keydown 事件触发两者而不是为两个 id 复制同一行

$('#messagetext, #abouttext').keydown

自动查找需要字母数量的跨度，因此无需为其指定 id

$( object ).prev('h3').find('span').text(object.val().length);

代码如下：

$('#messagetext, #abouttext').keydown(function() {
  countinput($(this), 'black') 
});

function countinput(object, color) {

    $( object ).prev('h3').find('span').text(object.val().length);

 if (object.val().length >= 5) {   
    
  $( object ).prev('h3').css('color', 'red');
        
  $( object ).prev('h3').css('font-weight', '600');
 }
 else {
  $( object ).prev('h3').css('color', color);
   $( object ).prev('h3').css('font-weight', '700');
 }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h3 style="text-align: center; font-size: 1.7rem; font-weight: 600; color: #414456;">Message (<span id="count_messagetext" value="0">0</span>/100)</h3>
<textarea rows="4" maxlength="100" style="height: auto !important;" id="messagetext" type="text" placeholder="Write your own message"></textarea>

<h3 style="text-align: center; font-size: 1.7rem; font-weight: 600; color: #414456;">About (<span id="count_abouttext" value="0">0</span>/100)</h3>
<textarea rows="4" maxlength="100" style="height: auto !important;" id="abouttext" type="text" placeholder="Write your own message"></textarea>

Answer 2

您可以为此只使用一个事件。

$('textarea').on('keydown, keyup', function(){
 
 var name = $(this).attr('name');
 var countid = $('#count_' + name);
 var count = $(this).val().length;
 
 //Default Color
 var color = '#000000';
 
 //You can just replace the default color here.
 if(name == 'messagetext'){
  color = '#000000';
 }else if(name == 'abouttext'){
  color = '#000000';
 }
 
 if (count >= 170) {
  $(countid).css('color', '#ed7777');
  $(countid).css('font-weight', '600');
 } else {
  $(countid).css('color', color);
  $(countid).css('font-weight', '700');
 }
 $(countid).html(count);
 
});

<h3 style="text-align: center; font-size: 1.7rem; font-weight: 600; color: #414456;">Message (<span id="count_messagetext" value="0">0</span>/100)</h3>
<textarea rows="4" maxlength="100" style="height: auto !important;" name="messagetext" type="text" placeholder="Write your own message"></textarea>

<h3 style="text-align: center; font-size: 1.7rem; font-weight: 600; color: #414456;">About (<span id="count_abouttext" value="0">0</span>/100)</h3>
<textarea rows="4" maxlength="100" style="height: auto !important;" name="abouttext" type="text" placeholder="Write your own message"></textarea>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

计算多个文本区域中字母的函数

Function for counting letters in multiple textareas

html

javascript

jquery

textarea

count