3

私の質問は、テキストエリアのテキストエリアの自動改行とほぼ同じですが、私のコンテキストはより複雑です。私は1行の属性を持つ複数のテキストエリアを持っているため、オンエアで書いているような印象を与えます（テキストエリアの境界線がCSSで>>>境界線として設定したため、境界線のないウェブサイトの空の領域を意味します：0;）。

JQueryまたはJavascriptを使用して、ユーザーが入力したテキストがテキストエリアの行の終わりに達した場合に計算して、下の次のテキストエリアに自動的に移動したいと思います。これを解決する 1 つの方法は、文字を数えてみることですが、文字によって幅が異なります。

nexttextarea.focus() イベントのトリガーとして機能するようにテキストエリアの端に非表示の要素を挿入することを考えていますが、これをどのように達成できるかわかりません。

私はふざけてさまざまなハックを考えてみましたが、解決策は1つだけのようです...各文字を配列に格納し、デフォルトのスペースをpxで値を取得してみてください... 'a' => 0.7pxのように,'b'=>0.9pxまたは、それらがどこかにリストされている場合は、そのようなものです（ただし、大文字、小文字、および他の多くの文字の両方を保存する必要があるため、メモリの観点から多くのオーバーヘッドがかかるようです.) 次に、サイズが変更された場合はブラウザの幅に応じて計算を行い、フルサイズでない場合は、テキストエリアの行幅がブラウザの幅の端でいっぱいになる時期を判断します。(当分の間、テキストエリアの幅は 100% で、親がないため、ブラウザーの幅全体を埋めます)。

誰かがこれを達成できる複雑または単純な方法のアイデアを持っている場合は、私を助けてください. 大きな問題は、ブラウザー ウィンドウのサイズが変更された場合に IE と Mozilla がスクロール バーを導入することです。スクロール バーは、ユーザーに絶対に見せたくないものです (空中に入力した印象を思い出してください)。

非常に冗長であることを許してください..正確で詳細になりたかっただけです。

4

3 に答える 3

1

これは見た目より難しいです。textareaのscrollHeightとscrollWidthを確認してみてください。それらが変更された場合、テキストはオーバーフローしました。その時点で、スクロールの高さ/幅がなくなるまで、現在のテキストエリアの最後から次のテキストエリアの最初にテキストを移動できます。

次に例を示します。

document.onkeyup = function(evt) {
    var event = evt || window.event;
    var target = event.target;
    var nextArea = target.nextSibling; // assumes no whitespace between textareas.
    var chars;
    if (target.tagName == 'TEXTAREA' && (target.scrollLeft || target.scrollTop)) {
        chars = 0;
        while (target.scrollLeft || target.scrollTop) {
            target.value = target.value.replace(/.$/, function(m0) {
                nextArea.value = m0 + nextArea.value;
                return '';
            })
            ++chars;
            target.selectionStart = target.value.length;
        }
        nextArea.focus();
        nextArea.selectionStart = chars;
    }

}​

http://jsfiddle.net/L73RG/3/

keyupたとえば、ユーザーはコンテキストメニューを使用して貼り付けることができるため、完全に機能するソリューションでは、これを単なるイベント以上のものにバインドする必要があることに注意してください。ボックスをイベントをトリガーせずに変更できる場合は（たとえば、トップレベルの「編集」メニューを使用して）、マウスイベントにバインドしたり、タイマーで時々実行したりすることもできます。

于 2012-05-20T00:28:03.090 に答える
0

テキストエリアのコンテンツがこの質問に提供された回答でオーバーフローしていないかどうかをキーを押すたびに確認してください： HTML要素のコンテンツがオーバーフローしていないかどうかを判断します

次に、余分な文字を削除して、次の文字に配置する必要がありますtextarea。おそらく1つずつ、各文字を移動した後にオーバーフローチェック機能を使用して、テキスト領域がまだオーバーフローしているかどうかを確認します。

于 2012-05-19T23:46:27.970 に答える
0

考えられる解決策は、テキストのサイズを測定することです。Ext-JSは、オフスクリーンの絶対位置に配置されたdivを作成し、測定するフォントのスタイルプロパティを提供し、div自体を測定することでこれを実現します。

Ext-JSのコードをインスピレーションとして使用できますhttp://docs.sencha.com/ext-js/4-1/#!/api/Ext.util.TextMetrics

于 2012-05-19T23:49:37.653 に答える