5

Javascript を使用して、Chrome で任意に選択された TEXTAREA ノードで選択されたテキストを置き換えようとしています (! コンテンツ編集可能な div ではありません!) 選択されたテキストを置き換えるために多くの場所で繰り返されるコード フラグメントは、基本的にこれを行います:

var sel = window.getSelection();
var range = sel.getRangeAt(0);
range.insertNode( document.createTextNode("test "));

ただし、これは TEXTAREA や INPUT TYPE=TEXT などの入力フィールドでは機能しません。テキストは、TEXTAREA の内部ではなく BEFORE に挿入されます。

textarea.selectionStart と textarea.selectionEnd を使用して、テキスト領域内の選択テキストを変更する別の方法があります。ただし、これらには、実際にアクティブ/選択されている textarea 要素を特定する必要があります。Chrome/Webkit の document.activeElement が壊れているようで、ずっと壊れていました。「現在選択されているテキストエリア」を見つけるための回避策がわかりません。ここでバグを参照してください...

http://code.google.com/p/chromium/issues/detail?id=14436

ここで解決しようとしている問題のマイクロデモを見ることができます。

http://dj1.willowmail.com/~jeske/_drop/insertIssue/1.html

http://ajaxandxml.blogspot.com/2007/11/emulating-activeelement-property-with.html

これについて何か考えはありますか？

任意の TEXTAREA ノードで選択された任意のテキストを含む Web ページが与えられた場合、フォーカスがどのテキストエリアにあるかを事前に知らずに、アクティブなテキストエリアを見つけて、選択したテキストを他のテキストに置き換えるにはどうすればよいですか?

((参考: Chrome 拡張機能でこのコードを使用しています。ページ内の JavaScript コンテンツ スクリプトがページの JavaScript を拡張しているため、事前にページ構造がどのようなものかわかりません。どの Web ページでも機能する必要があります。 )))

4

2 に答える 2

2

あなたが抱えている問題は、コードが実行される前にボタンをクリックした結果、アクティブな要素が変化することだと思います。代わりにmousedownイベントを使用してデフォルトのボタン アクションを防止すると、Chrome で正常に動作します。

http://jsfiddle.net/b3Fk5/2/

于 2012-08-16T00:01:06.900 に答える
0

2012 年 8 月 23 日現在、Chrome は activeElement を適切にサポートしていないようです。

私のクロム拡張機能では、右クリックしてコンテキスト メニューを取得すると、activeElement が変更される可能性があるため、いくつかの課題もある可能性があります。

focus解決策は、Chrome でより信頼性の高い activeElement を作成するハンドラーを提供し、TEXTAREA との直接対話を使用して選択の置換を処理することでした。

var dActiveElement = null;

function _dom_trackActiveElement(evt) {
    if (evt && evt.target) {
      dActiveElement = evt.target;
      console.log("focus on: " + dActiveElement.nodeName + 
                  " id: " + dActiveElement.id);
    } else {
      console.log("focus else..");
    }
}

if (document.addEventListener) {
   document.addEventListener("focus",_dom_trackActiveElement,true);
}

function insertTextAtCursor(text) {
    console.log("insertTextAtCursor : " + text);    

    if (dActiveElement.nodeName.toUpperCase() == "TEXTAREA") {
       console.log("selection in textarea!  id: " + dActiveElement.id);

       var ta = dActiveElement;
       var saveSelectionStart = ta.selectionStart;

       var newvalue = ta.value.slice(0,ta.selectionStart) + 
                         text + ta.value.slice(ta.selectionEnd,ta.length);
       console.log("output : " + newvalue  + ", len : " + newvalue.length);
       var newSelectionEnd = ta.selectionStart + text.length;

       ta.value = newvalue;
       ta.selectionStart = ta.selectionEnd = (newSelectionEnd);       
    }
 }
于 2012-08-23T21:11:00.967 に答える