テキスト部分を可視部分に限定する

Question

テキスト部分のみを表示部分に限定する方法はありますか？

私はスクロールしたくない、私はそれのための行数の列を指定していると私はそのユーザーは、可能なスクロールが表示されるように多くの文字を入力することはできませんでした。

もちろん、私はオーバーフローを設定できました：隠されていますが、とにかく記号が入力されます。 textareaに入力されたデータがいくつかの印刷レポートで使用され、紙のスクロールの可能性がないので、このロジックが必要です。

1. が 文字のいくつかの平均数を使用します。

   私は2可能な解決策を発見しました。これで制限する番号は です。これは非常に荒いです。平均数が の文字列の場合、通常よりも大きい文字の場合は なので、 はまだ一部のデータを非表示にします。

2. 文字を別のdivに入力し、 のレンダリングを使用して幅/高さを計算します。私は非常に遅くなるとは思わない に見える これは正しい実装であることを確認します。

Answer 1

あなたはscrollHeightをチェックするためにJavaScriptを使用して、それはもう何のスクロールを持っていなくなるまで「オリジナル」の高さよりも大きい場合には、テキストを切り捨てることができます。このためのコードは次のようになります。

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/

Answer 2

あなたはそれが宅配便、または他のいくつかの非プロポーショナルフォントを使用するスタイルでした。そうすれば、すべての文字が同じサイズであるため、正確にいくつの文字が収まるかを知ることができます。文字列の文字数を制限するためのいくつかのよく知られている技法のいずれかを使用して制限するのが容易になります。

欠点は、（Courierの見た目が気に入らない限り）かなり見えないことですが、それは実行可能な解決策であり、私は他のことは考えられません。

Answer 3

私は、キーボード入力だけでなく、oninputを使用してすべての入力形式（貼り付け、ドラッグ/ドロップなど）を検出するShadow Wizardの取り組みに似たものを思いつきました。これは、次のCSSでテキストエリアのスクロールバーをオフにする必要があります。

textarea { overflow: hidden; } 

あなたは、Firefox 4やChromeなどのブラウザ用のresize: none;を設定することをお勧めします。また、スペースがなければOperaのラッピングは壊れませんが、word-wrap: word-break;は正しくサポートされていないので、これを回避する方法がわかりません。JavaScriptは、テキストエリアの内容にそれを変更するたびに思い出し伴い、テキスト要素のサイズを超えた場合、変更は以前の値に戻され：http://jsfiddle.net/37Jnn/ - でテスト：デモ作業

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

Firefox 4、IE8、Chrome 9、Opera 10。

Answer 4

要約するだけです。私はCourierフォントソリューションをディスカッションから除外します。ほとんどの場合、それは受け入れられないからです。キーアップ/プロパティ変更を使用する両方のソリューションには欠点があります。 視覚的なテキストが入力され、その後にのみ削除されます。

IEで最後のシンボルが\ nの場合、substr（0、oTextarea.value.length - 1）を作成すると問題が発生します。この場合、記号が残っているのでハングします。したがって、最後の\ nの場合は、oTextarea.value.length - 2を使用する必要があります。

プロパティの変更には、いくつかのマルチブラウザソリューションを使用する必要があります。たとえば、this

このようなチェックをユーザーフレンドリー（入力不可）にする唯一の方法は、テキスト領域ごとに他の隠しテキスト領域を作成し、データが実際に表示される前のイベントでこのテキスト領域をすべてチェックすることです元のテキスト領域（キーダウンのような）。しかし、この場合、すべての選択範囲、ペーストを処理し、それらを隠して再適用する必要があります。そして、論理は自明ではありません。