Question

我有一个像

这样的HTML文件

<html>
    <head>
        <script>
            function fontEdit(x, z, y) {
                document.execCommand(x, y, z);
            }
        </script>
    </head>
    <body>
        <input type="submit" value="Bold"   onClick="fontEdit('Bold')" />
        <input type="submit" value="Italic" onClick="fontEdit('Italic')" />
        <input type="submit" value="Underline" onClick="fontEdit('Underline')" />
        <input type="submit" value="StrikeThrough" onClick="fontEdit('StrikeThrough')" />
        <div id="EditBox" contentEditable="true" style="width: 600px; height: 200px; border: solid 1px red"></div>
    </body>
</html>

当我离开EditBox时，例如点击Bold或Italic Button，我想得到一个事件。理想情况下，必须通知焦点变化。

Answer 1

可能正在寻找div

的onblur事件

当元素失去焦点时会引发模糊事件。

<div id="EditBox" contentEditable="true" style="width: 600px; height: 200px; border: solid 1px red" onblur="myFun();"></div>

JS

function myFun()
{
    alert('you are out of the box.');
}

JS Fiddle Demo

Answer 2

请检查此项以处理粗体，斜体，下划线，直线

<input type="submit" value="Bold"   onClick="EditBox.style.fontWeight = 'bold'" />
<input type="submit" value="Italic" onClick="EditBox.style.fontStyle = 'italic'" />
<input type="submit" value="Underline" onClick="EditBox.style.textDecoration = 'underline'" />
<input type="submit" value="StrikeThrough" onClick="EditBox.style.textDecoration = 'line-through'" />
<div id="EditBox" contentEditable="true" style="width: 600px; height: 200px; border: solid 1px red"></div>

JS DEMO： - LINK for JS DEMO

如何在焦点移出节点时获取事件

2 个答案: