textarea maxlength 下拉菜单答案

【问题标题】：textarea maxlength dropdown menutextarea maxlength 下拉菜单
【发布时间】：2015-09-21 11:48:42
【问题描述】：

我有一个包含 3 个值的下拉菜单，根据您在菜单中选择的值，我希望更改 textarea MaxLength。这是可能的还是可行的？

我查看了 jQuery val() 和 change() 但没有让它工作。

/最好的问候

【问题讨论】：

请分享您的 html 结构并展示您的尝试。

标签： jquery textarea maxlength dropdown

【解决方案1】：

你可以使用类似的东西

<input id="myInput" type="text" maxlength="2">
 <select>
  <option onclick='changeMaxLength(2)'>2</option>
  <option onclick='changeMaxLength(5)'>5</option>
  <option onclick='changeMaxLength(10)'>10</option>
</select>

和 jQuery

function changeMaxLength(length) {
    jQuery("#myInput").attr('maxlength', length);
  }

【讨论】：

【解决方案2】：

您需要设置textarea 的maxlength 属性，以根据从下拉列表中选择的值更改其长度。

HTML 代码：

<textarea id="txtarea" maxlength="5"></textarea>
<select id="dropdown">
  <option value="5">Five</option>
  <option value="50">Fifty</option>
  <option value="100">Hundread</option>
</select>

JS 代码：

$(function () {
  $('#dropdown').on('change', function () {
     $('#txtarea').attr('maxlength', $(this).val());
  });
});

Live Demo@ JSFiddle

【讨论】：

【解决方案3】：

你可以使用change()来监听变化事件，attr()来设置maxlength属性

更新：使用 val() 在更改下拉值时更新内容长度是否大于 maxlength

$('#len').change(function() {
  var len = this.value;
  $('#text').attr('maxlength', len).val(function(i, v) {
    return v.length > len? v.substring(0, len): v;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id=len>
  <option value=10>10</option>
  <option value=20>20</option>
  <option value=30>30</option>
  <option value=40>40</option>
</select>

<textarea maxlength=10 id=text></textarea>

【讨论】：

【解决方案4】：

这是一个没有 jquery 的 java-script 解决方案。
它会找到您选择的选项，然后为文本区域设置一个值。

var e = document.getElementById("list");

e.addEventListener("change", function() {
  var select = e.options[e.selectedIndex].value;
  var k = document.getElementById("area");
  k.innerHTML = "" + select;
  if (select == "first") {
    k.setAttribute("maxLength", 30);
  } else if (select == "second") {
    k.setAttribute("maxlength", 10);
    k.text = select;

  }
});

<select id="list">
  <option>first</option>
  <option>second</option>
  <option>third</option>
  <option>fourth</option>
</select>

<textarea id="area">
  test
</textarea>

【讨论】：

【解决方案5】：

很简单，当select发生变化时，你需要改变textarea的maxlength属性。

唯一的问题是，如果用户先点击“大”，然后再点击“小”。您需要将字符串切割成较小的值长度。

HTML

<select id="text-size">
   <option value="10">small</option>
   <option value="20">medium</option>
   <option value="40">large</option>
</select>
<textarea id="textarea" maxlength="10"></textarea>

jQuery

jQuery(document).ready(function($) {
    $('#text-size').on('change', function(event) {
       event.preventDefault();
       $textarea = $('#textarea');
       size = $(this).val();

       $textarea.attr('maxlength', size);
       $textarea.val($textarea.val().substr(0, size));
    });
});

这是一个演示http://codepen.io/anon/pen/EVyXGv

【讨论】：

在答案中发布您的代码解决方案，并使用演示仅用于测试。答案应该是独立的，并且可以在不离开网站的情况下轻松查看。虽然您可能有一个很好的解决方案，但当它包含的只是一个链接时，答案本身的质量非常低