限制行數（行+ Enter鍵按下）在文本區域加顯示行數

我期待找到一種使用jquery/html /甚至css執行以下操作的方法。限制行數（行+ Enter鍵按下）在文本區域加顯示行數

我的文本區域是固定大小，1字體大小/類型，我希望能夠執行以下操作。線的

數限制到18行
顯示用戶至今已使用的（有點像用字符利用Twitter的方法，但顯示線）

線定義的行數：我的項目的一行代碼是當用戶按下鍵盤上的輸入並轉到新行時，或者當在textarea中創建新行/行時，通過自然地連續輸入int he textarea來創建行。我基本上有一個固定大小的textarea，用戶不能超出我設定的這些限制。

來源

2012-01-29 Redwall

如果什麼用戶將文本粘貼到文本區域使用右鍵 - >粘貼？ – techfoobar 2012-01-29 11:06:57

我不會爲您的問題提供任何代碼片段，但只是我看到解決方案的方法。基於font.js javascript庫，您可以檢索文本和文本中所有字符的像素長度。如果您在文本框中使用了獨特的字體，則每當某行中的像素數等於或低於新行中使用的實際像素數時，就可以知道每行何時完成。在僞代碼，它應該是這樣的：

var textBoxLineInPixels = 300 //or getting the actual number through DOM; 

onChangeEvent { 
    var totalNumberOfPixels = getNumberOfPixelsFromElement(idToYourTextBox); 
    var numberOfLinesUsed = totalNumberOfPixels/textBoxLineInPixels; 
    update(idToYourNumberOfLinesContainer, numberOfLinesUsed); 
}

通過像素數的分界線在您的textarea的像素總數會給你在你的textarea的使用線路的當前數量。

來源

2012-01-29 11:08:24

謝謝，但我相信有一個更簡單的JavaScript版本來實現這一點。我已經嘗試瞭解決方案[這裏]（http://stackoverflow.com/questions/6501043/specify-and-limit-number-of-lines-in-textarea-and-display-line-count-using-jquer/6501310 ＃6501310），但它似乎並沒有工作。 – Redwall 2012-01-29 11:48:02

您的鏈接中提供的解決方案在多個情況下效率不高，例如在框中複製/粘貼。儘管我給你的那個似乎很容易，但確實可能有其他解決方案。祝你好運！ – 2012-01-29 11:58:15

謝謝，我只是沒有足夠的知識，在JavaScript知道如何做你的建議:(....我明白你在說什麼，是的，我想這可以工作... – Redwall 2012-01-29 12:11:17

不完全是問題的答案，但這會限制鍵入時文本區域中的字符數/向下計數。

還刪除任何不需要的字符。

CSS：

<style> 
div.textarea-wrap{ 
    padding: 8px 0px; 
    border-radius: 3px; 
    postion:relative; 
    margin: 5px 0px 15px 0px; 
} 


textarea#styled_text_area { 
    width: 93.5%; 
    height: 120px; 
    font-size: 12px; 
    border: 1px solid slategrey; 
    border-radius: 3px; 
    padding: 8px 3%; 
    font-family: Tahoma, sans-serif; 
    background: #E3E9ED; 
} 


.remaining { 
    margin: 3px 0px; 
    line-height: 10px; 
} 

div.remaining p{ 
    color: lightslategrey; 
    float: right; 
    margin: 4px 3% 0px 0px; 
    float:right; 
} 

.remaining input{ 
    width:27px; 
    border: 0; 
    padding: 0; 
    border-radius: 0; 
    background: none; 
    color: lightslategrey; 
    float:right; 
    margin: 0; 
} 
</style>

的Javascript：

<script> 
function clean(el){ 
    var textfield = document.getElementById(el); 
    var regex = /[^a-z 0-9?!.,]/gi; 
    if(textfield.value.search(regex) > -1) { 
     textfield.value = textfield.value.replace(regex, ""); 
     } 
} 
// Text counter 
var maxAmount = <?php echo($message_input_size);?>; 
function textCounter(textField, showCountField) { 
    if (textField.value.length > maxAmount) { 
     textField.value = textField.value.substring(0, maxAmount); 
    } else { 
     showCountField.value = maxAmount - textField.value.length; 
    } 
} 
</script>

HTML：

<div class="textarea-wrap"> 

    <textarea name="ta" id="styled_text_area" rows="6" placeholder="Type here..." onKeyDown="textCounter(this.form.ta,this.form.countDisplay), clean('styled_text_area');" onKeyUp="textCounter(this.form.ta,this.form.countDisplay), clean('styled_text_area');"></textarea> 


    <div class="remaining"> 
    <p>Characters Remaining</p> 
    <input readonly type="text" name="countDisplay" size="3" maxlength="3" value="500"><br><br> 
    </div> 
</div>

來源

2016-01-01 13:31:46

限制行數（行+ Enter鍵按下）在文本區域加顯示行數

回答

相關問題