HTML TextArea限制行數

我想有一個textarea，用戶可以輸入最多255位數和5行文本。然後當他們點擊「發佈」按鈕時，文本將被髮送到不同的php文件。文本被髮送到第二個php文件和255位數的限制工作（maxlength =「255」），但我無法獲得線路上的限制。我搜索了它，搜索了論壇並嘗試了多件事，但沒有任何結果。這是我嘗試過的一件事。HTML TextArea限制行數

<script> 
$(document).ready(function() { 
$('textarea[name=message]').on('keypress', function (event) { 
var textarea = $(this), 
    numberOfLines = (textarea.val().match(/\n/g) || []).length + 1, 
    maxRows = 5; 

if (event.which === 13 && numberOfLines === maxRows) { 
    return false; 
} 
}); 
}); 
</script> 
<textarea name="message" placeholder="What's on your mind?" maxlength="255" data-limit-rows=true></textarea> 

<input type="submit" value="Post"> 
</form>

由於

來源

2017-03-01 Martin W

你限制回車次數（次用戶按下回車鍵），或根據textarea的寬度文本行數？ –

@fauxserious我想限制文本行的數量。我從其他人那裏複製的代碼。因爲我認爲它會這樣做。 –

...根據textarea的寬度？ –

在容器中的文本行的數量通常依賴於容器的尺寸。因此，您首先需要關於textarea內部文本的一些信息。

我們可以假定一個字符是textarea中一行的高度。這當然也取決於textarea中字符的font-size和font-family。一旦我們獲得了這些尺寸，我們可以檢查看看在textarea中輸入了多少行。不幸的是，我們需要使用與textarea相同寬度的div來複制其中的一部分，以便檢查這些數字。

var textarea = document.getElementById('userinput'); 
 
var button = document.getElementById('checklines'); 
 

 
button.onclick = function(){ 
 
    var temp = document.createElement('div'); 
 
    temp.style.width = textarea.clientWidth + 'px'; 
 
    var style = window.getComputedStyle(textarea) 
 
    temp.style.fontFamily = style.getPropertyValue("font-family"); 
 
    temp.style.fontSize = style.getPropertyValue("font-size"); 
 
    temp.textContent = 'X'; 
 
    document.body.appendChild(temp); 
 
    var unit = temp.clientHeight; // height of one line 
 
    temp.textContent = textarea.value; 
 
    var lines = temp.clientHeight/unit; 
 
    console.log(lines); 
 
    temp.outerHTML = ''; 
 
}

<textarea id="userinput"></textarea> 
 
<button id="checklines">Check Lines</button>

來源

2017-03-01 19:23:15

？然後什麼？你檢查了數字，現在.. –

HTML TextArea限制行數

回答

相關問題