1

良い、

div contentEdible プロパティの単語を同じ単語に置き換える必要がありますが、書式設定されています...
このように:
<div> My balls are big </div>

これに (単語を置き換えます: ボール):
<div> My <font style="color:blue;">balls</font> are big </div>

contentEditable では、これは動的に行われ、ユーザーがテキストを入力している間に置換が行われます。onkeydown、onkeyup、または onkey press の簡単なイベントでこの部分を解決できると思います。しかし、キャレットの問題は、私が試したすべての後、単語が置き換えられる前に留まり、いつ後に留まるべきかということです。私はいくつかのjsコードを書き込もうとし、いくつかのjqueryスクリプトを見つけようとしましたが、この状況ではすべて失敗しました...

誰もがアイデアやトリックを持っていますか?

私は考えます: --> フォーマットされていない単語の長さを記録します。--> この単語を削除します --> 新しい単語を書式設定します。--> このフォーマットされた単語の長さに基づいて配置するために、キャレットを使用して移動します。--> そうですか。PS: この div のどの場所でも、言葉を考慮する必要があります。

上記のことを行うこのコードの書き方がわかりません。

私が間違っている場合は、私を修正してください。

以来、ありがとう！

編集[1]: これが特にMozilla Firefoxで動作することを望みます。

4

1 に答える 1

0

このマシンには IE6/7 しかありませんが、この概念を Ranges の他のバージョンのブラウザーに適用できるかもしれません (または、これはクロスブラウザーですか?)。

基本的に、カーソル位置を保存し、検索/置換を行ってから、カーソルを元の場所に戻します。

html:

<div id="content" contentEditable="true" onkeyup="highlight(this)">This is some area to type.</div>

そしてスクリプト：

function highlight(elem) {
// store cursor position
var cursorPos=document.selection.createRange().duplicate();
var clickx = cursorPos.getBoundingClientRect().left; 
var clicky = cursorPos.getBoundingClientRect().top; 
// copy contents of div
var content = elem.innerHTML;
var replaceStart = '<font style="color:blue">';
var replaceEnd = '</font>';
// only replace/move cursor if any matches
// note the spacebands - this prevents duplicates
if(content.match(/ test /)) {
    elem.innerHTML = content.replace(/ test /g,' '+replaceStart+'test'+replaceEnd+' ');
    // reset cursor and focus
    cursorPos = document.body.createTextRange();
    cursorPos.moveToPoint(clickx, clicky);
    cursorPos.select(); 
    }   
}
于 2010-07-30T03:51:22.010 に答える