I want to capture when a user pastes data into a text input field using mootools event system.
Anyone have experience of this?
The paste event has become better supported in recent times: IE has had it since around 2000 (IE 5.5, I think), Firefox since 3.0, WebKit for a couple of years (not sure exactly when). You should use it where possible and fall back to detecting ctrl-v or shift-ins in other cases, or polling the input box's value using a timer.
The function will get fired whenever the keys 'ctrl+v' are pressed.
Mootools docs : http://www.mootools.net/docs/more/Interface/Keyboard
EDIT : HTML and JS Code
<html>
<head>
<script type='text/javascript' src='core.js'></script>
<script type='text/javascript' src='more.js'></script>
<script type='text/javascript'>
function keyPressed(e)
{
var evt = Event(e);
evt.stop();
}
window.addEvent('domready', function()
{
var myKeyboardEvents = new Keyboard(
{
eventType: 'keyup',
events:
{
'ctrl+v': keyPressed
}
});
myKeyboardEvents.activate()
});
</script>
</head>
<body>
<form id='myForm'>
<input type='text' name='some' id='username' value='stack#over.com'/>
</form>
</body>
</html>
Related
I've been trying to understand jQuery delegation by writing a short script, but I encountered 2 problems.
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body>
<input type="text" id="text" />
<div id="msg"></div>
<script>
function showMsg() {
if ($("#text").val() === "") {
$("#msg").html("Your input is empty");
} else {
$("#msg").html("You have entered something")
}
}
$("#text").on("blur", showMsg());
</script>
</body>
1). This event delegation doesn't work as expected, the message "Your input is empty" always shows itself indefinitely. How to fix this?
2). In the showMsg() function I have to explicitly use $("#text") for the script to work, if I use $(this) it won't work. What if I have a lot of input fields that need to use this function, is it possible to uniformly define the function so that those input fields can use it without having to change anything in the function?
All you need to do is change
$("#text").on("blur", showMsg());
to
$("#text").on("blur", showMsg);
This will also fix your $(this) problem. You can set that back now.
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
Within Internet Explorer 9 & 10, the localStorage implementation fires events unexpectedly (great thread here: Bug with Chrome's localStorage implementation?)
Does anybody know of a way to stop the storage event from firing on tabs that initiated the change within internet explorer?
For example the following shouldn't show an alert when the add button is clicked, but it does in IE:
fiddle: http://jsfiddle.net/MKFLs/
<!DOCTYPE html>
<html>
<head>
<title>Chrome localStorage Test</title>
<script type="text/javascript" >
var handle_storage = function () {
alert('storage event');
};
window.addEventListener("storage", handle_storage, false);
</script>
</head>
<body>
<button id="add" onclick="localStorage.setItem('a','test')">Add</button>
<button id="clear" onclick="localStorage.clear()">Clear</button>
</body>
</html>
EDIT:
On a side note, I've opened a bug with MS here. https://connect.microsoft.com/IE/feedback/details/798684/ie-localstorage-event-misfired
Maybe it won't get closed.....
Changing your script to the following prevents the handling of any storage events in the focused window.
This isn't precisely what you asked, as I believe that would require a patch to the browser, but it causes IE 9/10 to conform to the spec while having no adverse effects on other browsers (other than the global and listeners).
<script type="text/javascript" >
var focused;
window.addEventListener('focus', function(){focused=1;}, false);
window.addEventListener('blur', function(){focused=0;}, false);
var handle_storage = function (e) {
if(!focused)
alert("Storage",focused);
};
window.addEventListener("storage", handle_storage, false);
</script>
See this fiddle for the updated, conforming behavior.
Edit: The following also works and avoids the listeners at the cost of a runtime check of window focus:
<script type="text/javascript" >
var handle_storage = function (e) {
if(!document.hasFocus())
alert("Storage");
};
window.addEventListener("storage", handle_storage, false);
</script>
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.
I'm working on a project for a client, and we want to make a easter egg, when you click some of the letters in the logo.
There are three letters, and you have to click in the right order, before it activates the easter egg. However, because it's in a link, I wondered if I could use CTRL+Click...? I've searched the web, but couldn't get any answers...
Sure, you can do that
<html>
<head>
<title>Test Page</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
$('#link').click( function( event )
{
if ( event.ctrlKey )
{
event.preventDefault();
}
});
});
</script>
</head>
<body>
Google
</body>
</html>
You'll need to add your own logic to track the sequence of clicks on the three letters.
The link could work, just have it execute a JavaScript method on the click rather than navigate to a page. Since you mentioned that there needs to be an order to the clicks, just have some variable's state transition based on the click sent.
<script type="text/javascript">
var track = 0;
function click_this(val)
{
// Manage your state here
}
</script>
Test