We Keep Coding

Replace JQuery for contenteditable element event binding

I'm using JQuery in my project, and the only line it gets used is the following:
$('#div').on('input', function() { ... });
Is there a more lightweight lib/polyfill I can use instead, which allows to register an input event on a contenteditable div?

In pure javascript you can do something likes that :
document
.getElementsByTagName("div")
.addEventListener('input', function() { ... }));
And add this html attribute contenteditable="true" on your div.

Set a JavaScript ondblclick event to a class inside tinyMCE editor

Some words in my tinyMCE textarea editor are in a span tag with a specific class called "myclass". For instance, the word Hello that is visible in the tinyMCE textarea editor is in the source code with the following HTML code:
<span class="myclass" id="hello">Hello</span>
I try to launch a function on double click on the word Hello.
The usual jQuery code does not work for words inside the tinyMCE editor:
$(document).ready(function() {
$('.myclass').dblclick(function() {
alert('class found');
});
});
The function does not fire when I double click on the word Hello that is in the editor.
How can I bind the function to the tinyMCE editor?

TinyMCE uses an iframe element, so you cannot use $('.myclass') on your "main" scope in order to get elements inside that iframe (The content of the iframe is a different scope).
Instead - you need to run $('.myclass').dblclick in the scope of that iframe.
To do so you can use the setup callback and the editor.on("init" event that TinyMCE gives you:
tinymce.init({
selector:'textarea',
setup: function(editor) {
editor.on("init", function(){
editor.$('p').on('dblclick', function() {
alert('double clicked');
});
});
}
});
Live demo here.
Note that editor.$ is not a jQuery object, so you cannot do everything you are used to with jQuery, however it's pretty close.

Clickable url div in ace editor text

I have an ace editor "textarea" and inside it I have a span with the class "ace_underline". This span is basically a url and I want to be able to catch the mouseup event on it.
I know that I can catch stuff like this
editor.on("click", function(evt) { //something; });
but I want to be able detect only when I'm clicking on top of the "ace_underline" span.
Could someone help me with this?
Thanks!

I think I found it, still needs some fixing up in some cases but it's working:
var handler = function(e){
var editor = e.editor;
var pos = editor.getCursorPosition();
var token = editor.session.getTokenAt(pos.row, pos.column);
if (/\bmarkup.underline\b/.test(token.type)) {
window.open(token.value); // opens the link
}
}
Editor.on("click", handler);
It was based on this: github link

You can use a string for the second argument of .on() that is a selector for elements within the parent:
$(editor).on('click', 'span.ace_underline', function(evt) {
// $(this) is the span element
});

hide keyboard on ios device when focus in input

I want hide virtual keyboard on ipad device when some plugin ( or other code) set focus to input element on html page using pure javascript( or jquery library)

If you need a pure javascript solution, use this line :
document.activeElement.blur();
This line removes the focus on the active element and hiding the keyboard.
Reference
MDN document.activeElement
MDN HTMLElement.blur

You would have to blur it again but the keyboard might flash.
$('input').on('focus', function() { $(this).blur(); });
Or, depending on if you have dynamically created input elements.
$('#wrapper').on('focus', 'input', function() { $(this).blur(); });

Typescript version requires to fire blur() on HTMLElement. Like this:
let myElement: HTMLElement;
myElement = <HTMLElement>document.activeElement;
myElement.blur()

Sometimes, it needs waiting for a while.
setTimeout(function() { document.activeElement.blur(); }, 100);

getting contents with tinyMCE?

I have a tinyMCE textarea #frmbody and am using the jquery instance of it.
<textarea class="tinymce" name="frmbody" id="frmbody" cols="30" rows="20"></textarea>
I'm trying to get the contents of the textarea as the user types.
$("#frmbody").live('keyup', function(e) {
alert("keyup");
});
The code above is not working and I'm not sure why. If I remove the tinyMCE instance, the code above works fine. Any ideas?

That's because an instance of TinyMCE isn't a true textarea, so keyup events aren't detected. Try the onchange callback instead.

You can make tinyMCE own listener by:
http://www.tinymce.com/wiki.php/API3:event.tinymce.Editor.onKeyUp
or write your own and use built-in function getContent:
http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.getContent

One could just grab the contents of the editor using :
tinymce.activeEditor.getContent();
If you want to attach an onchange event, according to this page, http://www.tinymce.com/wiki.php/api4:class.tinymce.Editor, create the editor using the following code :
var ed = new tinymce.Editor('textarea_id', {
init_setting_item: 1,
...
}, tinymce.EditorManager);
ed.on('change', function(e) {
var content = ed.getContent();
$("#textarea_id").val(content); // update the original textarea with the content
console.log(content);
});
ed.render();
Please note that onchange is fire when the user unfocuses, press enter, or press a toolbar button instead of every keystroke.

It is very easy to write an own handler and assign it to the editor iframe document.
There are tinymce handlers for various events already defined like keyUp
Here is the standard way to assign an own handler to the editor iframe document
var my_handler = function(event) {
alert('my handler fired!');
};
var ed = tinymce.get('my_editor_id');
$(ed.getDoc()).bind('keyup', my_handler);

TinyMCE hides the Text Area and creates a html container. If you write content in the box its a iFrame with the name "TEXTAREANAME_ifr".
So try this:
$("#frmbody_ifr").live('keyup', function(e) {
alert("keyup");
});
I think as Thariama already said the EventHandler from TinyMCE would be the best way.