Trả về tiêu điểm cho contenteditable sau execCommand?

Tôi có đoạn mã sau thể hiện thuộc tính có thể chỉnh sửa và một nút sẽ chèn văn bản in đậm vào đoạn văn có vùng có thể chỉnh sửa được. Câu hỏi của tôi là làm thế nào để trở lại tập trung vào nơi tôi rời đi sau khi nhấp vào in đậm, nếu bạn làm nổi bật một số văn bản, và nhấn đậm, nó sẽ in đậm những văn bản đó, nhưng tiêu điểm sẽ không còn ở đó nữa. Điều tương tự cũng xảy ra nếu bạn không chọn bất kỳ thứ gì và nhấp vào in đậm, tiêu điểm sẽ biến mất và nếu bạn nhấp vào nơi bạn đã dừng lại, bạn có thể nhập văn bản in đậm.Trả về tiêu điểm cho contenteditable sau execCommand?

Cảm ơn bạn rất nhiều vì đã giúp đỡ!

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

Nguồn

2009-08-22 FurtiveFelon

Bạn có thể muốn lưu trữ các mục nhấp cuối cùng trong một biến và sau đó gọi .focus() về nó sau khi .execCommand đã được thực hiện. Something như thế này, tôi đoán:

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

Bằng cách này bạn cũng có thể loại bỏ các thuộc tính từ "contenteditable" đánh dấu ...

HTH

Nguồn

2009-09-11 11:55:14 ALFABreezE

Điều này sẽ liên kết hành động với sự kiện nhấp của '# bold' mỗi khi bạn nhấp vào một đoạn, dẫn đến trình xử lý bị ràng buộc nhiều lần. Bạn không muốn điều đó. – Jake

Đã thêm lớp '.editable', vì vậy nó chỉ liên kết với đoạn với lớp đó được chỉ định trong đánh dấu. – ALFABreezE

Mỗi khi bạn bấm vào một p.editable một handler sẽ bị ràng buộC#bold. Khi bạn nhấp vào #bold tất cả những điều này sẽ được kích hoạt dẫn đến execCommand được chạy nhiều lần và tập trung nhảy xung quanh tất cả các p.editables đã được nhấp. Câu trả lời mà devongovett đưa ra không bị vấn đề này bởi vì trình xử lý #bold chỉ bị ràng buộc một lần. – 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() 
}

Tham khảo điều này có thể giúp bạn:

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

Nguồn

2009-09-16 14:55:00

Bạn chỉ có thể sử dụng .focus jQuery() để tập trung vào nó. Điều này sẽ hoạt động:

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

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

Điều này chỉ theo dõi trường hiện đang chỉnh sửa mỗi khi người dùng tập trung và khi nhấn nút đậm được đặt trở lại trường đó.

Nguồn

2009-11-27 00:37:28 devongovett

BẠN NÊN SỬ DỤNG .contents()

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

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

Nguồn

2010-07-22 02:56:35 fukid

cảm ơn, điều này sẽ giúp! –

lý do tại sao .contents() gọi? – xec

Không biết tại sao '.contents()' là bắt buộc, nhưng nó hoạt động trong khi trực tiếp gọi '.focus()' thì không. fukid, bạn có thể giải thích? – FeifanZ

Nếu bạn đang ở trong một khung nội tuyến, gọi tập trung() trên giao diện mặc định.

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

Nguồn

2012-01-18 00:29:08

Trả về tiêu điểm cho contenteditable sau execCommand?

Trả lời

Các vấn đề liên quan