Question

我发现了一个脚本以及一些HTML，它会计算您在框中输入的字符数量：

<script type="text/javascript">
    function change (el) {
        var max_len = 50;

        if (el.value.length > max_len) {
            el.value = el.value.substr(0, max_len);
        }

        document.getElementById('char_cnt').innerHTML = el.value.length;
        document.getElementById('chars_left').innerHTML = max_len - el.value.length;

        return true;
    }
</script>`

<form>
    <textarea style="border: 1px solid #eb008b;" cols=100 rows=2 
onkeyup="change(this);"></textarea>
    <p>You've typed <span id="char_cnt">0</span> character(s)</p>
    <p>You are allowed <span id="chars_left">lots</span> more</p>
</form>

在此示例中，最多可包含50个字符。

我想在同一页面上添加第二个表单，最多可包含200个字符。当我复制代码时，它会停止一个脚本工作。

如何添加它以使两个脚本在同一页面上工作？

Answer 1

为什么要设置第二个JS功能？当您通过id或name属性触发表单时，您可以轻松确定要处理的表单。

尝试这样的事情：

<!DOCTYPE html>
<html>
<body>

<script type="text/javascript">
  function change (el) {
    if (el.value.length > el.maxLength) {
      el.value = el.value.substr(0, el.maxLength);
    }
    document.getElementById(el.name + '_char_cnt').innerHTML = el.value.length;
    document.getElementById(el.name + '_chars_left').innerHTML = el.maxLength - el.value.length;
    return true;
  }
</script>

<form>
    <!-- Left Textarea -->
    <textarea name="left" style="border: 1px solid #eb008b;" cols=100 rows=2 maxLength=50 onkeyup="change(this);"></textarea>
    <p>You've typed <span id="left_char_cnt">0</span> character(s)</p>
    <p>You are allowed <span id="left_chars_left">lots</span> more</p>

    <!-- Right Textarea -->
    <textarea name="right" style="border: 1px solid #eb008b;" cols=100 rows=2 maxLength=200 onkeyup="change(this);"></textarea>
    <p>You've typed <span id="right_char_cnt">0</span> character(s)</p>
    <p>You are allowed <span id="right_chars_left">lots</span> more</p>
</form>

</body>
</html>

Answer 2

复制表单代码时，可能会复制<script type="text/javascript"> jQuery(document).ready(function( $ ) { $('#input_2_11').change(function(event) { var current_selection = $('#input_2_11' + ' option:selected').html(); var size_json = <?php echo $specials_json; ?>[current_selection]; $('#dynamic_offer').html(size_json); }); });属性。 id只会获得指定id的第一个实例。

尝试这样的事情：

＆＃13;

document.getElementById()

＆＃13;

const MAX_LEN = 50;

Array.from(document.querySelectorAll("form")).forEach(form => {
  const ta = form.querySelector("textarea"),
    cc = form.querySelector("span.char_count"),
    cl = form.querySelector("span.chars_left");

  ta.addEventListener("keydown", () => {
    if (ta.value.length > MAX_LEN) {
      ta.value = ta.value.substr(0, MAX_LEN);
    }
    cc.innerHTML = ta.value.length;
    cl.innerHTML = MAX_LEN - ta.value.length;
  });

});

＆＃13;

让两个javascripts在同一页面上工作

2 个答案: