вернуть фокус на contenteditable после execCommand? - PullRequest
Новая
       10

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

13 голосов
/ 22 августа 2009

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

Ответы [ 5 ]

9 голосов
/ 22 июля 2010

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

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

    $('#bold').click(function (){
            document.execCommand('bold', false, true);
            $(current).contents().focus();
    });
});
4 голосов
/ 27 ноября 2009

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

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

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

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

1 голос
/ 16 сентября 2009

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

1 голос
/ 11 сентября 2009

Возможно, вы захотите сохранить последний нажатый элемент в переменной, а затем вызвать .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" из разметки ...

НТН

0 голосов
/ 18 января 2012

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

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