13

contenteditableプロパティを示す次のコードと、contenteditable領域のある段落に太字のテキストを挿入するボタンがあります。私の質問は、太字をクリックした後にフォーカスを中断したところに戻す方法です。テキストを強調表示して太字をクリックすると、それらのテキストは太字になりますが、フォーカスは表示されなくなります。何も選択せずに太字をクリックすると同じことが起こり、フォーカスが消えます。もう一度中断したところをクリックすると、太字のテキストを入力できます。

ご助力ありがとうございます！

<head>
    <style type="text/css">
    #container{
        width:500;
    }
    .handle{
        float:left;
    }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $('#bold').click(function (){
            document.execCommand('bold', false, true);
        });
    });
    </script>
</head>
<button id="bold">Bold</button>
<div id="container">
<div class="c"><p contenteditable>Some text here asdf asdf asdf asdf asdf asd fasd fsa dfsa df asdf sadf sa dfa sdf sadf asd fsa df sadf asdf asdf asd fas df asdf as </p></div>

<div class="c"><p contenteditable>Some text here asdf asdf asdf asdf asdf asd fasd fsa dfsa df asdf sadf sa dfa sdf sadf asd fsa df sadf asdf asdf asd fas df asdf as </p></div>
</div>
4

5 に答える 5

9

.contents（）を使用する必要があります

var current;
$(function(){
    $("p[contenteditable]").focus(function() {
        current = this;
    });

    $('#bold').click(function (){
            document.execCommand('bold', false, true);
            $(current).contents().focus();
    });
});
于 2010-07-22T02:56:35.803 に答える
4

jQuery .focus() 関数を使用してフォーカスすることができます。これはうまくいくはずです：

var current;
$(function(){
    $("p[contenteditable]").focus(function() {
        current = this;
    });

    $('#bold').click(function (){
            document.execCommand('bold', false, true);
            $(current).focus();
    });
});

これは、ユーザーがフォーカスするたびに現在編集中のフィールドを追跡し、太字のボタンをクリックするとフォーカスがそのフィールドに戻されます。

于 2009-11-27T00:37:28.580 に答える
1

最後にクリックされた項目を変数に保存し、 .execCommandが実行された後に.focus()を呼び出すことができます。このようなものだと思います：

 $(function(){
        $('p.editable').click(function() {
            var clickedItem = $(this);
            clickedItem.attr('contenteditable', true).focus();
            $('#bold').click(function (){
                    document.execCommand('bold', false, true);
                    clickedItem.focus();
            });
        });
    });

"contenteditable"このようにして、マークアップから属性を削除することもできます...

HTH

于 2009-09-11T11:55:14.400 に答える
1

HTML:

<button onclick="doRichEditCommand('bold')" style="font-weight:bold;">B</button>

JavaScript:

function doRichEditCommand(aName, aArg){
    getIFrameDocument('editorWindow').execCommand(aName,false, aArg);
    document.getElementById('editorWindow').contentWindow.focus()
}

これを参照してください：

https://developer.mozilla.org/en/Rich-Text_Editing_in_Mozilla

于 2009-09-16T14:55:00.873 に答える
0

iframe にいる場合は、デフォルト ビューで focus() を呼び出します。

myiframedocument.execCommand('Bold',false,null);
myiframedocument.defaultView.focus();
于 2012-01-18T00:29:08.730 に答える