Welcome to WebmasterWorld Guest from 54.167.0.111

Forum Moderators: open

Message Too Old, No Replies

Change DOM event phase - Firefox initEvent bug

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

     

JAB Creations

12:51 am on Jun 27, 2012 (gmt 0)

WebmasterWorld Senior Member jab_creations is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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>

JAB Creations

4:14 am on Jun 29, 2012 (gmt 0)

WebmasterWorld Senior Member jab_creations is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Due to the lameness of the Gecko bug I've been forced to lame-out and use setTimeout in a try/catch.

- John
 

Featured Threads

Hot Threads This Week

Hot Threads This Month