{"id":3117,"date":"2013-12-30T11:40:35","date_gmt":"2013-12-30T17:40:35","guid":{"rendered":"http:\/\/bililite.com\/blog\/?p=3117"},"modified":"2014-02-26T17:15:14","modified_gmt":"2014-02-26T23:15:14","slug":"dom-3-events-for-bililiterange","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2013\/12\/30\/dom-3-events-for-bililiterange\/","title":{"rendered":"DOM 3 events for <code>bililiteRange<\/code>"},"content":{"rendered":"<p>I've been looking at the <a href=\"http:\/\/www.w3.org\/TR\/DOM-Level-3-Events\/\">DOM 3 event model<\/a> and decided that the <code class=\"language-javascript\" >bililiteRange.text()<\/code> and<code class=\"language-javascript\" >bililiteRange.select<\/code> methods ought to implement those, even though they're not in browsers yet. Nobody implements <code class=\"language-javascript\" >beforeinput<\/code>, or <code class=\"language-javascript\" >event.data<\/code> in the <code class=\"language-javascript\" >input<\/code> event handler, and <code class=\"language-javascript\" >select<\/code> only works in <code class=\"language-html\" >&lt;input&gt;<\/code> and <code class=\"language-html\" >&lt;textarea&gt;<\/code> (not in <code class=\"language-html\" >contenteditable<\/code>). And that's in <em>modern<\/em> browsers.<\/p>\r\n<p>But that's no excuse for me. <code class=\"language-javascript\" >beforeinput<\/code> is now dispatched before changing the text, and <code class=\"language-javascript\" >input<\/code> after, with <code class=\"language-javascript\" >event.data<\/code> set to the text to be inserted, and <code class=\"language-javascript\" >event.bounds<\/code> set to the bounds array in the original text (this last is not part of the spec, but it's hard to work with changing text without it). This is an incompatible change from the way it used to work (with <code class=\"language-javascript\" >event.detail<\/code> being set to <code class=\"language-javascript\" >{text: text, bounds: bounds}<\/code>), but I don't think that many people are using that aspect of the library.<\/p>\r\n<p>I also moved a few methods from the <a href=\"https:\/\/github.com\/dwachss\/bililiteRange\/blob\/master\/bililiteRange.util.js\">utilities library<\/a> into the <a href=\"https:\/\/github.com\/dwachss\/bililiteRange\/blob\/master\/bililiteRange.js\">main code<\/a>, since I used them so much.<\/p>\r\n<p>It doesn't look like my workplace is ever going to get past IE8 (many of the machines are still on Windows XP!), so I really want to support those. There are <a href=\"https:\/\/github.com\/jonathantneal\/EventListener\">polyfills<\/a> for getting the event listeners to work, and I incorporated a quick and cheap version of that into the code, and event listenders to dispatch <code class=\"language-javascript\" >input<\/code> events on keystrokes, drag and drop, and cut\/paste.<\/p>\r\n<p><a href=\"http:\/\/bililite.com\/blog\/2011\/01\/17\/cross-browser-text-ranges-and-selections\/\" title=\"Cross-Browser Text Ranges and Selections\"><code>bililiteRange<\/code><\/a> is now at version 2.0.<\/p>\r\n<p>I will be forever grateful when I can drop IE8.<\/p>","protected":false},"excerpt":{"rendered":"I've been looking at the DOM 3 event model and decided that the bililiteRange.text() andbililiteRange.select methods ought to implement those, even though they're not in browsers yet. Nobody implements beforeinput, or event.data in the input event handler, and select only works in &lt;input&gt; and &lt;textarea&gt; (not in contenteditable). And that's in modern browsers. But that's [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,10],"tags":[],"_links":{"self":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/3117"}],"collection":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/comments?post=3117"}],"version-history":[{"count":6,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/3117\/revisions"}],"predecessor-version":[{"id":3127,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/3117\/revisions\/3127"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=3117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=3117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=3117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}