I'm trying to send data to the server via Backbone if the users writes or paste a string inside an input text element.
in the Backbone events I thought something like this but it doesn't work:
events:{
"click .close":"closeResults",
"keypress input":"fetchData",
"paste input":"fetchData"
},
fetchData:function (e) {
var $this = this;
window.setTimeout(function () {
if ($.trim(e.target.value).length >= 3) {
console.log(e.target.value);
$this.collection.fetch({data: {limit: 10, term:$.trim(e.target.value)}});
}
}, 0);
}
If you switch to using the keyup event instead of keypress and paste, it will work for pasting via the keyboard ( ⌘ + v or Ctrl + v ) and typing normally.
If you use the input event, it will work even if you right click and paste (in addition to the same expected behavior as keyup).
More info on input:
https://developer.mozilla.org/en-US/docs/Web/API/window.oninput
use keyup and mouseleave (instead of input) event handlers so that it will also work in IE
see also How to detect right mouse click + paste using JavaScript?
events:{
"keyup input":"fetchData",
"mouseleave input":"fetchData"
},
Have a look at
e.originalEvent
_paste_plain_text : function (e) {
e.preventDefault();
var text = e.originalEvent.clipboardData.getData("text/plain");
document.execCommand("insertHTML", false, text);
}
Related
I'm using the following function with knockout
self.navigateToSection = ko.pureComputed({
read: function() {
return this;
},
write: function(data, event) {
if (event.type == "keydown") {
if ((event.keyCode != '13')) {
return;
}
}
... (more actions)
}//write
});
this is the HTML binding
data-bind="event: {keypress: navigateToSection}">
The function should help to navigate between different sections so the user must to be able to press the tab key and jump to a different link. it works well for most of the browser except for firefox in Windows 10 it's working fine in Mac for Firefox
I found that keypress event is no longer fired for non-printable keys, except for the Enter key, and the Shift + Enter and Ctrl + Enter key combinations for Firefox. So when I press tab it seems stock there instead to jump to the next HTML element with a tabindex attribute if I blur the element it allows to jump even in FF but just until the second keypress.
I try to unbind the element but it does not work well.
Any ideas?
The keypress event has been deprecated. You should use keydown instead.
I disabled the built-in pop up event. Now I want to implement a double click function on each cell of the month view.
Does anyone know how to do it?
You can add an event handler to the add event of the scheduler in the scheduler options like this:
add: (e) => {
// Place your code here.
e.preventDefault();
}
or in case you would rather not use arrow function:
add: function(e) {
// Place your code here.
e.preventDefault();
}
Calling e.preventDefault() will disable the built-in "add" event handling which is showing the popup window. You mentioned you already disabled it but this is a good way to do it if you did it in another way.
e will contain the slot's start and end time as well as the resource details, if you use resources.
You may want to associate the event with k-event class of an scheduler.
$("#scheduler").on("dblclick", '.k-event', function (e) {
var scheduler = $("#scheduler").getKendoScheduler();
var element = $(e.target).is(".k-event") ? $(e.target) : $(e.target).closest(".k-event");
var event = scheduler.occurrenceByUid(element.data("uid"));
alert("Start Date : " + event.start + ", End Date: " + event.end);
});
Demo Link
Try this it worked for me.
edit: function (e) {
e.preventDefault(); //prevent popup editing
var dataSource = this.dataSource;
var event = e.event;
if (event.isNew()) {
setTimeout(function () {
//dataSource.add(event);
editEvent(event); // your own function to call
});
}
else {
}
}
I have a lovely piece of code which drives a search box on a php page, making the search box dynamic, and it works perfectly. I'm just trying to adapt it, and at a bit of a loss.
At the moment the search must be done on a keyboard to make the search work. This is from the keypress() and keyup() functions within the script.
My problem is that I'm trying to use this search with an onscreen keyboard and no physical keyboard, so there never is a keypress or keyup.
Is there anything I can do do you think to replace these.
Would I be best to add an amended version of the code below (without the keypress/keyup) to each onclick even of my onscreen keyboard, or just amend the code to react to onscreen clicks?
thanks if anyone can help
<!--Javascript to turn keystrokes into search value-->
<script type="text/javascript">
$(document).ready(function () {
// Hide the submit button
$(":submit").hide();
// Bind an event to the keypress in order to override the form submission when pressing the enter key
$("input[name='search_term']").keypress(function (e) {
if (e.which == 13) {
// prevent the form from submitting in the normal manner (return key)
e.preventDefault();
}
});
// Bind an event to the keypress event of the text box
$("input[name='search_term']").keyup(function () {
// Get the search value
var search_value = $(this).val();
// This time we're going to grab data from a file to display
var filename = "functions/search.php";
// Send these values
var posting = $.post(filename, { search_term: search_value });
// Display this value in our results container
posting.done(function (data) {
$("#search_results").empty().append(data);
});
});
});
</script>
I'm writing a windows store app (HTML) that includes some simple rich-text editing. I can apply bold to the currently selected using a button which fires document.execCommand("bold",false,null);
However when I bind this to a keydown event like CTRL+B, nothing happens. Here's my keydown code.
document.addEventListener("keydown", catchShortCuts, false);
function catchShortCuts(e) {
if (e.ctrlKey) {
if (e.keyCode == 66) // b
document.execCommand('bold', true, null);
}
}
}
I know my keydown code works fine because if I replace the document.execCommand with another line of code it fires just fine when I press CTRL+B. It seems like execCommand has a problem with the keydown event?
Turns out that it works fine if you use keypress instead of keydown. Just in case anyone else has the same issue, that's a workaround. Still not sure why onkeydown doesn't work though.
Working code:
document.addEventListener("keypress", catchShortCuts, false);
function catchShortCuts(e) {
if (e.ctrlKey) {
if (e.keyCode == 66) // b
document.execCommand('bold', true, null);
}
}
}
I'm trying to create a Firefox add-on using the online Add-On SDK.
I'm starting with something simple - I want to add a toolbar button that reads the current selected text.
The documentation for the Selection object makes this looks simple enough:
var selection = require("selection");
if (selection.text)
console.log(selection.text);
This doesn't seem to work for me, I just get null.
Here's my complete code:
var selection = require("selection");
require("widget").Widget({
id: "widgetID1",
label: "Test Mozilla Widget",
contentURL: "http://www.mozilla.org/favicon.ico",
onClick: function(event) {
console.log('selection.text = ' + selection.text);
}
});
I've also tried to create the selection object inside the onClick even, with the same effect.
I am able to use the select event to get notified on new selections, so I guess I can use that instead (and keep the value), but I wonder why the above code isn't working... What am I doing wrong?
The selection variable as defined will only have the selected text as long as it is in focus. Clicking on the widget icon takes focus away from the selected text, so it sees no text selected.
Thats why it works when used inside the listener function.
To confirm this, I tried logging its value when a toolbar button is pressed (using the toolbarbutton module), and it works. Pressing a toolbar button (presumably) does not steal focus.
Here's the code, and you can test it online too:
var selection = require("selection");
var tbb = require("toolbarbutton").ToolbarButton({
id: "test",
label: "test",
image: "http://www.mozilla.org/favicon.ico",
onCommand: function(event) {
console.log('selection = ' + JSON.stringify(selection)); // works!
}
});
Here is a solution using the select event:
var selection = require("selection");
var selectedText = '';
function selectionChanged(event){
//todo: check for selection.isContiguous
selectedText = selection.text;
}
selection.on('select', selectionChanged);
require("widget").Widget({
id: "widgetID1",
label: "Test Mozilla Widget",
contentURL: "http://www.mozilla.org/favicon.ico",
onClick: function(event) {
console.log('Selection: ' + selectedText);
}
});