Question

这里我动态创建多个textarea 例如：

<div id="div1">
 <textarea class="form-control" rows="3" onkeyup='javascript:countChar(this);'></textarea>
 <div id='charCount'>250</div>
</div>

<div id="div2">
 <textarea class="form-control" rows="3" onkeyup='javascript:countChar(this);'></textarea>
 <div id='charCount'>250</div>
</div>

<div id="div3">
 <textarea class="form-control" rows="3" onkeyup='javascript:countChar(this);'></textarea>
 <div id='charCount'>250</div>
</div>

<div id="div4">
 <textarea class="form-control" rows="3" onkeyup='javascript:countChar(this);'></textarea>
 <div id='charCount'>250</div>
</div>

我的JS代码：

function countChar(val) {
    var len = val.value.length;
    if (len >= 250) {
        val.value = val.value.substring(0, 250);
    } else {
        $("#charCount").text(250 - len);
        $("#charCount1").text(250 - len);
    }
};

如果我手动编辑div id for example : <div id='charCount2'>250</div>现在第二个div也正常工作，这个代码可以正常使用第一个textarea但不能与其他textarea一起工作。

Answer 1

您不能拥有多个具有相同ID的元素。因此，您需要选择作为文本区域兄弟的元素。有多种方法可以做到这一点，但是使用你的布局，你可以使用next（）

$(val).next().text(250 - len);

其他选项选择父级并找到div

$(val).parent().find("div").text(250-len);

Answer 2

使用.next(SELECTOR)获取当前元素的下一个元素。

注意：ID属性在文档中必须是唯一的。还要考虑使用jQuery .on处理程序绑定事件而不是内联事件绑定。

＆＃13;

function countChar(val) {
  var len = val.value.length;
  if (len >= 250) {
    val.value = val.value.substring(0, 250);
  } else {
    $(val).next(".charCount").text(250 - len);
  }
};

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="div1">
  <textarea class="form-control" rows="3" onkeyup='javascript:countChar(this);'></textarea>
  <div class='charCount'>250</div>
</div>

<div id="div2">
  <textarea class="form-control" rows="3" onkeyup='javascript:countChar(this);'></textarea>
  <div class='charCount'>250</div>
</div>

<div id="div3">
  <textarea class="form-control" rows="3" onkeyup='javascript:countChar(this);'></textarea>
  <div class='charCount'>250</div>
</div>

<div id="div4">
  <textarea class="form-control" rows="3" onkeyup='javascript:countChar(this);'></textarea>
  <div class='charCount'>250</div>
</div>

＆＃13;

Answer 3

您不应该为DOM中的多个元素使用相同的id属性，但是，您仍然可以使用jQuery遍历方法运行代码以更具体地指定#charCount到udpate：

function countChar(val) {
  var len = val.value.length;
  if (len >= 250) {
    val.value = val.value.substring(0, 250);
  } else {
    $(val).parent().find("#charCount").text(250 - len);        
  }
};

使用类

的更好解决方案

使用类选择器而不是id：

function countChar(val) {
    var len = val.value.length;
    if (len >= 250) {
        val.value = val.value.substring(0, 250);
    } else {
        $(val).parent().find(".charCount").text(250 - len);        
    }
};

和你的HTML

<div id="div1">
 <textarea class="form-control" rows="3" onkeyup='javascript:countChar(this);'></textarea>
 <div class='charCount'>250</div>
</div>

<div id="div2">
 <textarea class="form-control" rows="3" onkeyup='javascript:countChar(this);'></textarea>
 <div class='charCount'>250</div>
</div>

<div id="div3">
 <textarea class="form-control" rows="3" onkeyup='javascript:countChar(this);'></textarea>
 <div class='charCount'>250</div>
</div>

<div id="div4">
 <textarea class="form-control" rows="3" onkeyup='javascript:countChar(this);'></textarea>
 <div class='charCount'>250</div>
</div>

Answer 4

使用 maxlength 将textareas限制为250个字符：

 <textarea class="form-control" rows="3" maxlength="250"></textarea>

通过jQuery而不是内联来定义事件，并使用input事件：

$('textarea').on('input', function() {
  $(this).next().text(250 - $(this).val().length);
});

$(this).next()定位应更新的div。

$('textarea').on('input', function() {
  $(this).next().text(250 - $(this).val().length);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
 <textarea class="form-control" rows="3" maxlength="250"></textarea>
 <div id='charCount'>250</div>
</div>

<div id="div2">
 <textarea class="form-control" rows="3" maxlength="250"></textarea>
 <div id='charCount'>250</div>
</div>

<div id="div3">
 <textarea class="form-control" rows="3" maxlength="250"></textarea>
 <div id='charCount'>250</div>
</div>

<div id="div4">
 <textarea class="form-control" rows="3" maxlength="250"></textarea>
 <div id='charCount'>250</div>
</div>

onkeyup没有动态创建多个textarea

4 个答案:

使用类