textarea maxlength下拉菜單

我有一個包含3個值的下拉菜單，具體取決於您在菜單中選擇的值，我希望textarea MaxLength更改。這是可能的還是可以工作的？textarea maxlength下拉菜單

我看過jQuery val（）和change（），但沒有得到它的工作。

/問候

2015-09-21 user2272544

請分享你的HTML結構，並顯示你試了一下。 – charlietfl

您可以使用change()聽change事件attr()設置maxlength屬性

更新：使用val()更新，如果內容長度超過最大長度大於同時改變下拉值

$('#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>

來源

2015-09-21 11:53:05

@Persijn：謝謝更新:) –

這很容易做到，你需要改變的textarea的select變化時的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

來源

2015-09-21 11:56:07

將您的代碼解決方案發布到自己的答案中，並使用演示僅用於測試。答案應該獨立，並且不用離開現場就可以輕鬆查看。雖然你可能有一個很好的解決方案，但答案本身是非常低的質量，當它包含的是一個鏈接 – charlietfl

你是絕對正確的，我修好了。謝謝 –

你需要設置你的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 [email protected] JSFiddle

來源

2015-09-21 11:59:21 dreamweiver

您可以使用類似

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

來源

2015-09-21 12:04:48 Erminesoft

這裏是沒有jQuery的一個java腳本的解決方案。
它找到您選擇的選項並在其後爲文本區域設置一個值。

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>

來源

2015-09-21 12:11:50 Persijn

textarea maxlength下拉菜單

回答

相關問題