homepage Welcome to WebmasterWorld Guest from 54.167.144.4
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Change DOM event phase - Firefox initEvent bug
Trying to trigger paste keyboard event to handle code without setTimeout.
JAB Creations




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

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




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

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

- John

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved