选择改变事件在contenteditable [英] selection change event in contenteditable

查看:183
本文介绍了选择改变事件在contenteditable的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我对contenteditable元素的标记如下:

My markup for contenteditable element is as below:

<iframe class="rich_text">
<html style="background:none transparent;">
    <head></head>
    <body contenteditable="true"></body>
</html>
</iframe>

身体是否有选择更改事件(contenteditable)?
因此我可以检测所选文本块是否有粗体/下划线等。

Is there a selection change event for the body (contenteditable)? So that I can detect whether the selected text block has bold/underline etc.

我尝试了一些事件处理程序(jQuery)但没有成功:

I've tried some event handlers (jQuery) but without success:

var richText = $(".rich_text"),
richTextDoc = richText.contents()[0],
richTextBody = richText.contents().find("body");

// Enable Design mode.
richTextDoc.open();
richTextDoc.write("");
richTextDoc.close();
richTextDoc.designMode = "on";

// Binds selection change event
$(richTextDoc).bind("select", function() { ... });
$(richTextDoc).bind("selectstart", function() { ... });
richTextBody .bind("select", function() { ... });
richTextBody .bind("selectstart", function() { ... });


推荐答案

假设您的iframe内容是从您可以使用的相同域名:

Assuming that the content of your iframe is served from the same domain you could use:

$('.rich_text').contents()
  .find('body')
  .bind('selectstart', function(){});

你可以从这里看,选择元素时正确触发了selectstart事件。

As you can see from here, the selectstart event is correctly fired when the element is selected.

这篇关于选择改变事件在contenteditable的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆