將textarea符號限制爲可見部分

是否有任何方法將textarea輸入的符號限制爲僅可見部分？將textarea符號限制爲可見部分

我不想滾動，我已經爲它指定了行數列，並且我希望該用戶不能輸入如此多的字符以至於可能會出現滾動。

當然，我可以設置溢出：隱藏，但無論如何將輸入符號。限制爲字符數不是我的情況，因爲不同的字符具有不同的寬度：例如W和1.我需要這種邏輯，因爲在textarea中輸入的數據用於某些打印報告，並且不可能在紙上滾動。

我發現只有2個可能的解決方案：

使用的字符一些平均數。並且由這個號碼限制。這很粗糙。因爲對於平均數字爲的大字符比平時大仍然會隱藏一些數據。
使用渲染輸入的字符到一些單獨的div和計算其寬度/高度。似乎到我會很慢，而不是肯定這是正確的實施。

2011-02-10 Yauhen.F

您可以使用JavaScript來檢查scrollHeight，如果不是「原始」的高度更大，截斷文本，直到它有沒有滾動了。代碼，這將是：

function CheckScroll(oTextarea) { 
    if (oTextarea.scrollHeight > oTextarea.offsetHeight) { 
     while (oTextarea.scrollHeight > oTextarea.offsetHeight) { 
      oTextarea.value = oTextarea.value.substr(0, oTextarea.value.length - 1); 
     } 
    } 
}

，並觸發它：

<textarea cols="15" rows="3" onkeyup="CheckScroll(this);" onchange="CheckScroll(this);" onpaste="CheckScroll(this);"></textarea>

現場測試案例：http://jsfiddle.net/yahavbr/bNqVf/1/

來源

2011-02-10 09:43:25

`onkeyup`對於這類事情來說是一個糟糕的方法。它使得它非常笨重（例如，儘量保持你的手指在鑰匙上）。而且，在Chrome 9中，刪除的字符太多。 – 2011-02-10 09:52:10

@安迪是的，但仍然是最小代碼的工作。 – 2011-02-10 10:07:42

你可以設置樣式使用快遞，或其他一些非比例字體。這樣，您就可以確切知道可以容納多少個字符，因爲所有字符都具有相同的大小，這可以使用幾種衆所周知的技術中的任何一種限制字符串中字符的數量，從而輕鬆限制它。

缺點是它看起來不漂亮（除非你碰巧喜歡Courier的樣子），但這是一個可行的解決方案，我想不出其他任何東西。

來源

2011-02-10 10:50:45 Spudley

我想出了一些類似於Shadow Wizard的工作，它使用oninput檢測所有形式的輸入（如粘貼，拖放），而不僅僅是鍵盤輸入。它要求關閉textarea的滾動條與下面的CSS：

textarea { overflow: hidden; }

您可能需要設置resize: none;像火狐4和Chrome瀏覽器。此外，如果沒有空格，Opera的包裝不會中斷，但它不能正確支持word-wrap: word-break;，所以我不確定你會如何解決此問題。JavaScript的涉及每次改變時間記住textarea的內容，如果文本超出元素的大小，改變回復到以前的值：

var prev = "", 
    tArea = document.getElementById("limit"); 

// Need to use onpropertychange event for IE8 and lower 
if ("onpropertychange" in tArea && !("oninput" in tArea)) { 
    tArea.onpropertychange = function() { 
     // Only run code if value property changes 
     if (window.event.propertyName == "value") 
      this.oninput(); 
    } 
} 

// oninput will fire for all types of input, not just keyboard 
tArea.oninput = function() { 
    // Temporarily remove the onpropertychange event to prevent a stack overflow 
    var opc = this.onpropertychange; 
    this.onpropertychange = null; 

    // Revert value if the text exceeds the size of the box 
    if (this.scrollHeight > this.offsetHeight) { 
     this.value = prev; 
    } 

    prev = this.value; 

    if (opc) 
     this.onpropertychange = opc; 
}

工作演示：http://jsfiddle.net/37Jnn/ - 在測試Firefox 4，IE8，Chrome 9，Opera 10.

來源

2011-02-10 11:00:24

-1

只是爲了總結。我將從討論中排除Courier字體解決方案。因爲在大多數情況下，這是不可接受的。這兩種使用密鑰更改/屬性更改的解決方案都有缺點：直觀地輸入了文本，然後才刪除。

當IE中的最後一個符號是\ n時，使substr（0，oTextarea.value.length - 1）有問題。在這種情況下，它會掛起，因爲\ r符號被留下。所以它應該使用oTextarea.value.length - 2在最後\ n的情況下。

對於財產變更應該使用一些多瀏覽器的解決方案。例如像this

使這種檢查用戶友好（不允許輸入）的唯一可能方式是爲每個文本區域創建其他隱藏文本區域，並在數據真正顯示之前在事件中對該文本區域進行所有檢查原始文本區域（如鍵入）。但在這種情況下，它將需要處理所有選擇範圍，粘貼並重新應用它們隱藏。而邏輯將不是微不足道的。

來源

2011-02-14 09:14:19

將textarea符號限制爲可見部分

回答

相關問題