I am using GWT components for web page. In my page I used ten text boxes. I want to block "tab" key event for navigate one text box to another text box.
Expected Approach: If I pressed tab key it wont go to another text box.
You can do somthing like this.
window.onkeydown = function() {
if (event.keyCode == 9) {
event.preventDefault();
}
}
Use NativePreviewEventHandler and use the logic mentioned by Mayank Pandya, which is
if (event.keyCode == 9) {
event.preventDefault();
}
Check for the Tabkey keycode. I am not sure about it.
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 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>
Do you know how to add watermark in CKEditor (visual word processor)?
I want the behavior like this: When the CKEditor is loaded, it has text by default. When I click on it, text must disappear.
Below are the steps to add water mark in CKEditor
Generally when you set default text in Ck Editor through java script on page load. JavaScript event get fired before the control actually load so if possible set the text for code behind.
Attaching Events in Javascript for OnFocus and OnBlur
$(document).ready(function() {
var myeditor = CKEDITOR.instances['EditorId'];
myeditor.on("focus", function(e) {
RemoveDefaultText();
});
myeditor.on("blur", function(e) {
setDefaultText();
});
});
Define your default text in this function
function setDefaultText() {
if (CKEDITOR.instances['EditorId'].getData() == '') {
CKEDITOR.instances['EditorId'].setData('Your Message Here');
}
}
function RemoveDefaultText() {
if (CKEDITOR.instances['EditorId'].getData().indexOf('Your Mesage Here') >= 0) {
CKEDITOR.instances['EditorId'].setData('');
CKEDITOR.instances['EditorId'].focus();
}
}
You can also define styles to the water mark by adding classes to the default text and place the class into you ck editor content css otherwise it will not work
A ready to use plugin can be tested here. It allows to customize the default text and it takes into acount, dialogs as well as reading the data from an external script.
You might want to try this jQuery plugin:
https://github.com/antoineleclair/ckwatermark
Using the event click with live function leads to strange behavior when using Firefox*.
With live in Firefox, click is triggered when right-clicking also! The same does not happen in Internet Explorer 7 neither in Google Chrome.
Example:
Without live, go to demo and try right clicking
the paragraphs. A dialog menu should
appear.
With live, go to demo and try right
clicking "Click me!". Now both dialog
menu and "Another paragraph" appear.
*tested with firefox 3.5.3
As far as I know, that is a known issue (bug?). You can easily work around it by testing which button was clicked as follows:
$('a.foo').live("click", function(e) {
if (e.button == 0) { // 0 = left, 1 = middle, 2 = right
//left button was clicked
} else {
//other button was clicked (do nothing?)
//return false or e.preventDefault()
}
});
you might prefer using a switch depending on your specific requirements, but generally you would probably just want to do nothing (or or simply return) if any button other than the left button is clicked, as above:
$('a.foo').live("click", function(e) {
switch(e.button) {
case 0 : alert('Left button was clicked');break;
default: return false;
}
});
I think it's a known "bug", you could potentially query the event object after attaching the click handler ( which gets attached to the document ) and see if its a right click, otherwise manually attach the click handler after you manipulate the DOM.
After looking it up, e.button is the property you want to query:
.live('click', function(e){
if ( e.button == 2 ) return false; // exit if right clicking
// normal action
});
See my answer here: if you don't mind changing the jQuery source a bit, adding a single line in the liveHandler() works around the problem entirely.
I am trying to make my gridview control in ASP.Net do a multi sort based on if the user pressed Ctrl key when trying to sort by clicking on a column name. The problem is that when I am using Firefox, if I click on a column name with Ctrl key pressed, the browser tries to open "javascript:__doPostBack('ctl00$ContentPla..." link in a new tab. IE and Chrome both don't do this unless the link is a real link.
Is there a way I can prevent Firefox from opening the link in a new tab and still cause the page to postback normally?
Thanks.
You need to capture the event of the Ctrl key being pushed down, using document.onKeyDown.
In your event handler, check if 'Ctrl' (key code 17) was pressed, as follows:
function document_keyDown(e) {
var KeyID = (window.event) ? event.keyCode : e.keyCode;
if (KeyID == 17) {
ctrlDown = true;
}
}
Here, I'm setting a 'ctrlDown' variable to true.
For the onKeyUp event, you can do the exact opposite:
function document_keyUp(e) {
var KeyID = (window.event) ? event.keyCode : e.keyCode;
if (KeyID == 17) {
ctrlDown = false;
}
}
Then, in the click event of your column elements, you can check if Ctrl has been clicked or not:
function columnElement_click() {
if (ctrlDown != undefined && ctrlDown == true)
alert("Ctrl + Click Received");
return false;
}
Make sure your column click handler returns false. Otherwise, the browser will execute the code, but then navigate to the address in the link's 'href' attribute.
Hope this helps.
(See also: http://www.geekpedia.com/tutorial138_Get-key-press-event-using-JavaScript.html)