Change DOM event phase - Firefox initEvent bug - JavaScript and AJAX forum at WebmasterWorld

I'm trying to have only text be pasted however the clipboard API is still in it's infancy at the moment. Below the code generates a temporary division element, moves the caret and in all browsers except Gecko/Firefox the event is triggered (the phase changes from 2 to 3). However Firefox is throwing errors left and right. The goal is to have Firefox trigger the event and then have the textContent method in the alert display the text you just pasted so that way I know I can start working with the text at that point.

I'm already working with an existing event and the best I can come up with at the proper approach is to possibly also use dispatchEvent however every time I come across a demonstration someone is creating a new event from scratch (and no full working code for examples). I really don't want to use setTimeout to make Firefox obey. Thoughts please?

- John

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Event Bug</title>
<script type="application/javascript">
//<![CDATA[
function init()
{
 if (document.getElementById('editor'))
 {
 document.getElementById('editor').onkeydown = function(e) {event_onkeydown(e);}
 }
}

function event_onkeydown(e)
{
 if (e.ctrlKey && e.keyCode==86) {event_onpaste(e);}//CTRL+v
}

function event_onpaste(e)
{
 if (e.ctrlKey && e.keyCode==86)
 {//alert(e.type);
 var r = document.getElementById('editor');
 var s = window.getSelection();
 var an = s.anchorNode;
 var fn = s.focusNode;
 var sos = s.getRangeAt(0).startOffset;
 var fos = s.getRangeAt(0).endOffset;

 if (!document.getElementById('editor_paste'))
 {
 var p = document.getElementById('editor_paste');
 var h = document.createElement('div');
 h.setAttribute('contenteditable','true');
 h.setAttribute('id','editor_paste');
 h.setAttribute('style','border: #f00 solid 1px; height: 100px;');
 var t = document.createTextNode('');
 h.appendChild(t);
 r.parentNode.insertBefore(h,r.nextSibling);

 var p = document.getElementById('editor_paste');
 p.focus();
 window.getSelection().selectAllChildren(p);
 window.getSelection().collapseToStart();

 try {e.initEvent(e.type,false,true);} catch (err) {alert(err);}
 alert('p.textContent = '+p.textContent);
 }
 }
}

window.onload = function()
{
 init();
}
//]]>
</script>
<style type="text/css">
p {font-size: 22px;}
</style>
</head>

<body>

<div contenteditable="true" id="editor" style="border: #00f solid 1px;">
<p>Paragraph one.</p>
<p>Paragraph two.</p>
</div>

</body>
</html>

Change DOM event phase - Firefox initEvent bug

Trying to trigger paste keyboard event to handle code without setTimeout.

JAB Creations

JAB Creations

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week