jquery - textarea maxlength 下拉菜单

Question

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

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

/此致

Answer 1

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

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());
  });
});

现场演示@JSFiddle

Answer 2

您可以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>

Answer 3

你可以使用类似的东西

<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);
  }

Answer 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>

Answer 5

这很容易做到，您需要在更改maxlength时更改textarea的属性select。

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

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