вернуть фокус на контент, доступный после execCommand?

У меня есть следующий код, демонстрирующий свойство contenteditable и кнопку, которая добавит жирный текст в абзац с контентной областью. Мой вопрос заключается в том, как вернуть фокус туда, где я остановился после нажатия на полужирный, если вы выделите какой-то текст и нажмите полужирный, он будет выделен для текста, но фокуса больше не будет. То же самое происходит, если вы ничего не выбираете и щелкаете жирным шрифтом, фокус не будет удален, и если вы нажмете, где вы остановились, вы можете напечатать жирный текст.вернуть фокус на контент, доступный после execCommand?

Большое вам спасибо за помощь!

<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>

источник

2009-08-22 FurtiveFelon

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

НТН

источник

2009-09-11 11:55:14 ALFABreezE

Это будет связывать действие с событием click '# bold' каждый раз, когда вы нажимаете абзац, в результате чего обработчик привязывается несколько раз. Вы этого не хотите. – Jake

Добавлен класс '.editable', поэтому он привязывается только к абзацу с этим классом, указанным в разметке. – ALFABreezE

Каждый раз, когда вы нажимаете p.editable, обработчик будет привязан к #bold. Когда вы нажмете #bold, все они будут уволены, в результате чего execCommand будет запущен несколько раз и начнет фокусироваться на всех щелканьях p.editables. Ответ devongovett дал не страдает от этой проблемы, потому что #bold обработчик связан только один раз. – Jake

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-16 14:55:00

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

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

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

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

источник

2009-11-27 00:37:28 devongovett

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

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

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

источник

2010-07-22 02:56:35 fukid

спасибо, это помогает! –

Почему вызов .contents()? – xec

Не знаю, почему '.contents()' требуется, но он работает, тогда как прямой вызов '.focus()' не делает. фукид, не могли бы вы объяснить? – FeifanZ

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

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

источник

2012-01-18 00:29:08

вернуть фокус на контент, доступный после execCommand?

ответ

Смежные вопросы