根据所选选项更改 maxlength答案

【问题标题】：change maxlength depending of the option selected根据所选选项更改 maxlength
【发布时间】：2012-12-19 16:57:24
【问题描述】：

我看到发布的类似问题并尝试更改它们以满足我的需求，但我对 javascript 的了解不够多，无法做到这一点。我需要当用户更改下拉选择时，“标题文本字段”最大长度会动态更改

a、b c 和 d 最大最大长度应为 40 并且 maxlength 应该是 2

我的代码如下，我不知道为什么，但它不能正常工作。当我将选择选项更改为“E”时，滴度输入框的 maxLength 是默认值（40），而不是 2。这就是问题所在。应该是 2。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>title page</title>
    <script type="text/javascript">
      function changeValue(dropdown) {
        var option = dropdown.options[dropdown.selectedIndex].value,
            field = document.getElementById('titre');

        if (option == 'a' || option == 'b' || option == 'c' || option == 'd') {
          field.maxLength = 40;
        } else if (option == 'e') {
          field.value = field.value.substr(0, 2); // before reducing the maxlength, make sure it contains at most two characters; you could also reset the value altogether
          field.maxLength = 2;
        }
      }?
    </script>
  </head>
  <body>
    <form action="converter.php" method="post">
      <h2>Feel all field below:</h2>
      <div>
        Title: <input type="texte" name="titre" id="titre" maxLength="40"/>  Format: 
        <select id="format" name="format" onchange="changeValue(this);">
          <option value="a">A</option>
          <option value="b">B</option>
          <option value="c">C</option>
          <option value="d">D</option>
          <option value="e">E</option>
        </select>
      </div>
      <div>
        <textarea name="texte" style="width: 415px; height: 155px;"></textarea>
      </div>
      <div>
        <input type="submit" value="OK" />
      </div>
    </form>
  </body>
</html>

【问题讨论】：

not working correctly 到底是什么意思？您的代码可以在 IE10、FF、Opera 和 Chrome 中正常工作。你期望它做什么？虽然在</script> 之前有一个额外的问号，但可能是帖子中的错字？你用什么浏览器？
当我将选择选项更改为“E”时，滴度输入框的maxLength是默认值（40），而不是2。这是问题所在。
是的，只是那个错字是错误的。否则一切看起来都是正确的 - 这是一个有效的小提琴：jsfiddle.net/jfrej/HbShf
@jfrej 实际上 jsfiddle 似乎无法正常工作。至少对我来说不是。可能是内联js问题？
@mkey，这里正在使用 firefox 和 chrome

标签： javascript html forms

【解决方案1】：

函数定义的末尾有一个问号。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>title page</title>
        <script type="text/javascript">
            function changeValue(dropdown) {
                var option = dropdown.options[dropdown.selectedIndex].value,
                field = document.getElementById('titre');

                if (option == 'e') {
                    field.value = field.value.substr(0, 2); // before reducing the maxlength, make sure it contains at most two characters; you could also reset the value altogether
                    field.maxLength = 2;
                } else {
                    field.maxLength = 40;
                }
            }
        </script>
    </head>
    <body>
        <form action="converter.php" method="post">
            <h2>Feel all field below:</h2>
            <div>
                Title: <input type="texte" name="titre" id="titre" maxLength="40"/>  Format: 
                <select id="format" name="format" onchange="changeValue(this);">
                    <option value="a">A</option>
                    <option value="b">B</option>
                    <option value="c">C</option>
                    <option value="d">D</option>
                    <option value="e">E</option>
                </select>
                </div>
                <div>
                    <textarea name="texte" style="width: 415px; height: 155px;"></textarea>
                </div>
                <div>
                <input type="submit" value="OK" />
            </div>
        </form>
    </body>
</html>

【讨论】：

现在多了一个分号； )。