Inline ckeditor and keypress event - javascript

I use inline Ckeditor to edit content. I want to bind a keypress event to the div i edit. I mean, i need an event that will fire when i change the content of div.
Here is an example of how i do that
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.2/ckeditor.js"></script>
</head>
<body>
<div id="ckediv" contenteditable="true">Editing with CKEDITOR</div>
<br>
<script type='text/javascript'>
$( "#ckediv" ).keypress(function() {
alert('cke key pressed');
});
</script>
</body>
</html>
The problem is that keypress is not fired in ie and chrome when i press enter ordelete keys. If i make a div with contenteditable="true" but without Ckeditor then the event works well.
Here is a jsfiddle with code that shows how it works now http://jsfiddle.net/uAc7c/4/ .I don't know why, but for some reason this jsfiddle(keypress event) doesn't work in ie. When i tested locally with above source, it worked.
And here is a jsfiddle without Ckeditor that shows how it should work http://jsfiddle.net/mPM4J/4/

JQuery Documentation says:
Note: as the keypress event isn't covered by any official specification, the actual behavior encountered when using it may differ across browsers, browser versions, and platforms.
So i guess IE and Chrome are two of the unsupported browsers.
Therefore try using the keyup event instead like this:
$( "#ckediv" ).keyup(function() {
alert('cke key pressed');
});
For more info, see here:
KeyUp Documentation in the JQuery API

Related

Polymer web component content click event not firing

I've just created my first element as a test and I'm running into an issue with an on-click event. My element is simply a button with a click event to increment a counter which is displayed as part of the button text. I've also added a content tag so you can add additional text to the button.
When I go to click the button in Chrome, if I click on the content text, the click event isn't fired. I have to actually click on the button element / the count in the button to fire the event. All seems to be working properly though in Firefox, Safari and Opera. I can click anywhere on the button in those browsers and the click event will fire. Am I doing something wrong? Is this just a bug with Chrome? Here is my code:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Test Element</title>
<script src="bower_components/platform/platform.js"></script>
<link rel="import" href="elements/my-counter.html">
</head>
<body unresolved touch-action="auto">
<my-counter count=5>Times a Day</my-counter>
</body>
</html>
elements/my-counter.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="my-counter" attributes="count">
<template>
<button on-click="{{increment}}">{{ count }} <content></content></button>
</template>
<script>
Polymer('my-counter', {
count: 0,
increment: function(event, detail, sender) {
console.log(event, detail, sender);
++this.count;
}
});
</script>
</polymer-element>
This code is also on GitHub if you would like to download it and test it yourself: https://github.com/andersryanc/playing-with-polymer/tree/master/my-counter
If you wrap your extra text in a span it works.
<my-counter><span>Times a Day</span></my-counter>
See this JSbin.
I guess this is related to the fact that textNodesdon't fire most events (see here).
If you mix LightDOM and ShadowDOM with events, make sure you read this article and this SO thread.
The reason that your code behaves differently in Chrome vs other browsers is that Chrome is currently the only browser shipping a native shadow dom implementation. Firefox is set to ship theirs in a couple weeks. More up to date info here: caniuseit - shadowdom

touch events not working in android phonegap webview (or even built-in browser)

I was using phonegap and needed to use 'touchstart' to speed up click response, only to realize that none of 'touchstart', 'touchmove', 'touchend' is firing but 'click'.
I even tested a simple page in the built-in browser (7" android 4.0.3 tablet), and found it failed.
I tested on two tablets still the same.
In the following page, button2 shows only 'html_click', button3 shows only 'click':
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf8">
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width">
<title>Droid touch event test.</title>
</head>
<body>
<button id="button">touch it</button>
<button id="button2" ontouchstart="d_('html_touchstart')" onclick="d_('html_click')">html</button>
<button id="button3">touch 3</button>
<div id="db"></div>
<script>
function $(d){return document.getElementById(d)}
function d_(m){dbo.innerHTML=dbo.innerHTML+' '+m}
function ts1(e){d_('document touched')}
function ts2(e){d_('button touched')}
function eh(e){
d_(e.type);
}
var ets='touchstart',dbo=$('db');
document.addEventListener(ets,ts1,false);
$('button').addEventListener(ets,ts2,false);
$('button3').addEventListener(ets,eh,false);
$('button3').addEventListener('touchend',eh,false);
$('button3').addEventListener('click',eh,false);
</script>
</body>
</html>
Why 'touchstart isn't firing? Should I do anything to make touch events work?
Or is there any other way around to make click response faster?
I used mousedown event, worked but not notably fast.
(new Date()).getTime() difference (including some innerHTML change) between mousedown and click is only around 15.
Keeping only what was necessary to show you the concept, I wrote this and tested using Phonegap Build (default to Phonegap 2.0, but shouldn't matter) on an ICS device. Should work for you:
<!DOCTYPE html>
<html>
<body>
<button id="button1">1</button>
<button id="button2">2</button>
<script>
document.getElementById("button1").addEventListener('touchstart',button1Pressed);
document.getElementById("button2").addEventListener('touchstart',button2Pressed);
function button1Pressed ()
{
alert('Button 1 Pressed');
}
function button2Pressed ()
{
alert('Button 2 Pressed');
}
</script>
</body>
</html>
I also faced the same problem. On bellow first line i was getting error "Android WebView and NO_FAST_DRAW = false". After change to second line. it worked. the error was at createCustomAlert('wpt'). SO the function which I was called look like a string. This err was coming. So please check at place of function calling place
onclick = 'createCustomAlert('wpt')'
onclick = 'createCustomAlert(3)'
I also faced the same problem and messed it with almost three days. I put click events on my html input tags, (EditText) and tried, but it also didn't work. Finally, to my miracle, I just put a simple alert("Hello") to see with ontouchstart. To my surprise, I successfully got the alert and also softkeyboard, for which I was trying almost a week. You also try with this..
Best of Luck

simple way to add onchange event to ckeditor?

Is there a nice and easy quick way to add an onchange event to the CKeditor.
I would like to do something when ever the text changes? Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="js/ckeditor/ckeditor.js" type="text/javascript"></script>
<script src="js/ckeditor/adapters/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(function () {
var config = {
toolbar:
[
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList']
],
width: 600,
height: 400,
resize: false
};
$('.jquery_ckeditor').ckeditor(config);
CKEDITOR.instances[0].on('change', function () {
alert("test");
});
});
//]]>
</script>
</head>
<body>
<textarea class="jquery_ckeditor" cols="80" id="editor1" name="editor1" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea>
</body>
</html>
Edit. Excuse me, my previous version of answer was not correct.
As I have found out it's no a standart onchange event for CKEDITOR. Instead of it you can emulate it with help of another events for textarea. For example, you can use the event 'keydown'.
Try it by changing the code for CKEDITOR to the next one:
CKEDITOR.instances[idOfTextarea].document.on('keydown', function() {alert('text')});
More info
There is an error in your code:
CKEDITOR.instances[0]
instances is an object, and you can get value (editor) by the key.
Replace it with
CKEDITOR.instances[yourInstanceName]
CKEDITOR.instances.editor1.on('change', function() {
console.log("TEST");
});
CKEditor provides various events which is mentioned in their Documentation.
Change Event: Fired when the content of the editor is changed.
Due to performance reasons, it is not verified if the content really changed. The editor instead watches several editing actions that usually result in changes. This event may thus in some cases be fired when no changes happen or may even get fired twice.
If it is important not to get the change event fired too often, you should compare the previous and the current editor content inside the event listener. It is not recommended to do that on every change event.
Please note that the change event is only fired in the wysiwyg mode. In order to implement similar functionality in the source mode, you can listen for example to the key event or the native input event (not supported by Internet Explorer 8).
CKEDITOR.instances.editor1.on('change', function () {
// operations
});
Here editor1 is the id of the textarea or the instance of the element.

javascript: getElementById problem in IE

I am trying to attach a click event to a check box using JavaScript. Shown below is the HTML and JS.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<input type="hidden" name="caution_c" value="0">
<input type="checkbox" id="caution_c" name="caution_c" value="1" tabindex="120">
<script type="text/javascript">
var cb = document.getElementById('caution_c');
cb.onclick = function() {
alert(1);
}
</script>
</body>
</html>
The problem is that in IE, the click event does not fire. I have narrowed down the problem location. The issue is that there is a hidden input just before the check box and both these elements have the same name. I'm not sure why this is causing a problem(after all, I'm using getElementById and the hidden element does not even have an id).
Is there a valid reason for this type of behavior (IE only. Works fine in Firefox...as always :( )? Also, is there a good workaround (I could just do document.getElementsByName('caution_c')[1] but I don't want to...)
Internet Explorer gets confused over name and id - it is highly recommended to treat these two attributes as if they were the same.
You can fix it either by 1) ensure that there are no id/name conflicts in your document, or 2) override IE's native getElementById-method.
Read more about it here.
Try using a different event such as onchange or onfocus to see if that solves it. Also I don't think onclick will be fired if a user tabs onto the checkbox, which may or not be how you intend it to work.
I agree, IE is poor in understanding things at html level.
I would rather add the link to button rather than using anchor elements, as IE is having trouble at anchor level with document.getElementById(). Try same at button and will work for other users.

click() method in Firefox

The following code is throwing two alerts as expected in IE but not in Firefox. Please help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function myFunction(){
alert('myfunc');
document.getElementById('mylabel').click();
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<p id='mylabel' onclick="alert('you reached');"></p>
<input type='button' value="Click me" onclick='myFunction();'/>
</BODY>
</HTML>
Firefox only has a click() function for form elements such as buttons. However, you can call the onClick function directly; you can change the line to
document.getElementById('mylabel').onclick();
This works in firefox or IE (but note that it requires that the function actually exists, which you know it does in this example).
Also note that you aren't actually simulating a click on that element (so, for example, if there were other things that such a click would do, such as also act as a click on the container, they won't happen). You're just getting the function that would run on a click, and running it directly. So it's not a solution for all situations where you need to simulate a click.
There's no click method on elements. Are you using any library?
Usually you have to do something like element.fireEvent('click') (prototype, mootools)
or element.click() (jquery)
UPDATE- Similar question: How do I programmatically click on an element in JavaScript?
Looks like an ugly and brittle solution, if I were you I'd just include jQuery and let that handle all the browser quirks.
Because the <p> tag does not have the method click.

Categories