Вернуть фокус в contenteditable после execCommand?

У меня есть следующий код, демонстрирующий свойство 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>

Ответы

Ответ 1

ВЫ ДОЛЖНЫ ИСПОЛЬЗОВАТЬ .contents()

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

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

Ответ 2

Вы можете просто использовать функцию jQuery.focus(), чтобы сфокусировать ее. Это должно работать:

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

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

Это просто отслеживает текущее поле редактирования каждый раз, когда оно фокусируется пользователем, и когда щелкнуть полужирным шрифтом, фокус возвращается в это поле.

Ответ 3

Возможно, вы захотите сохранить последний щелкнутый элемент в переменной, а затем вызовите .focus() на нем после выполнения .execCommand. Что-то вроде этого, я думаю:

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

Таким образом вы также можете удалить атрибут "contenteditable" из разметки...

НТН

Ответ 4

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

Ответ 5

Если вы находитесь в iframe, вызовите focus() в представлении по умолчанию.

myiframedocument.execCommand('Bold',false,null);
myiframedocument.defaultView.focus();