2011-08-05 13 views
20

私は<textarea>にドロップダウンリストを表示して、ユーザーが特定のものを入力するのを助けたいと考えています。これは現在のIDEからコード補完として認識されます。入力を開始すると、現在のカーソル/キャレットの位置にポップアップが表示され、矢印キーを使用して移動してテキスト入力を完了できます。HTMLテキストエリア内のカーソル位置(X/Y、行/列ではない)を見つける方法はありますか?

私は(カーソル位置の文字インデックスIE)テキスト文字列でhow to get the cursor position知っているが、私はそのように<textarea>要素内のカーソルのX/Y座標(offsetWidthoffsetHeightのようなもの)を取得する方法がわかりませんそこにリスト要素を配置することができます。それはHTML/JavaScriptで可能ですか?それはどのように機能しますか?編集可能なHTML入力して

+2

などのキーワードのコードのオートコンプリートのいくつかの種類を構築します1それはかなり良い質問です! – Ben

+3

文字の数とボックスの幅がわかっている場合は、平均文字幅/行の高さに基づいて位置を推測できますか? –

+0

私は提案された他の質問を読んだが、私はその答えを問題の解決策とは考えていない。また、3歳で、ブラウザや標準も進歩しています。私は、これが動作するためには現在のブラウザを必要とすることを恐れていない。 – ygoe

答えて

2

(IFRAMEのようCKeditorまたはRich Text Editorまたはより良い:jsfiddle)あなたはキャレット位置に空のspan要素を挿入して、ドロップダウンを表示するには、その要素の位置を得ることができます。

複雑なように見えるかもしれませんが、これを行う方法は他にはありません。

これは、コードエディタを使用するときにjsfiddleのようなテキストと書式コードがないカラーコード、いくつかの余分な可能性を可能性があり、そして多分+

+1

あなたの興味深い提案がそうであるように、余分な可能性がよく聞こえます。しかし、私は、ユーザーが(MS Wordや他のWebページからコピーするときのように)書式付きテキストを入力できないようにして、貼り付けられたテキストをプレーンテキストのように再フォーマットしてそのように変換できます。 – ygoe

+0

それは可能です、jsfiddle.netはそれだけです。どのように彼らはそれを行う正確に私は知らない。そのサイトでコーディングして貼り付けてみてください。それはあなたにいくつかのアイデアを与えるかもしれません。 (FF ctrl + vでは動作しませんが、 "右クリック - 貼り付け"は行います) – Willem

+0

CKeditorはオープンソースとしてダウンロードして使用できますが、jsfiddleはWebアプリケーションのみ、ダウンロードなし、技術的な洞察力はないようです。彼らがどのように彼らの事をしたか知っていますか? – ygoe

関連する問題