Using keypress() and keyup() when using an onscreen keyboard - keypress

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>

Related

Computed Knockout JS function seems not unbind in firefox for keypress event

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.

How to validate user content on real time with ckeditor's accessibility checker?

I am new in using ckeditor and its API. I would like to find a way to validate the content of the users through the accessibility checker while they are typing.
The information available in the documentation do not make clear how to do this.
I'm trying to figure out how to do this...
<script>
var instance = CKEDITOR.replace('editorck');
instance.on('focus', function(event) {
var editor = CKEDITOR.instances['editorck'];
if(editor.plugins.a11ychecker){
var a11ycheckerCommand = new CKEDITOR.command(editor, {
exec: function( editor ) {
editor.execCommand("a11ychecker");
}
});
a11ycheckerCommand.setState(CKEDITOR.TRISTATE_ON);
a11ycheckerCommand.exec(editor);
}
});
instance.on('key', function (event) {
var editor = CKEDITOR.instances['editorck'];
editor.execCommand("a11ychecker.listen");
});
</script>
The code above expects two events. The first is the "onfocus" which activate the accessibility checker when the editor area is focused. The second is what I'm looking for, call some command or execute something to validate the content while keyup event is occuring.
The next step is to allow the user to save the content if it is validated. Perhaps a way to get the current accessibility issues list?
CKEDITOR.plugins.a11ychecker.IssueList or editor.plugins.a11ychecker.IssueList ?

Can't unbind keypress; pressing 'enter' in searchbar passes the window.location/document.location I specified and goes to the wrong page

I'm working on a page that is part of a pre-existing site. There is some script attached to the page that is overriding my searchbar 'enter' presses, so that every time I press enter it goes to the site-search page instead of my events-search page. This is my function:
$(".searchBox").keypress(function (e) {
var key = e.which;
if (key == 13) // the enter key code
{
var searchTerms = $(this).val();
var newQueryString = updateQueryStringParameter(resetPage(document.URL), "q", searchTerms);
window.location.href = newQueryString;
}
});
By stepping through it, I can see that it is hitting each line of my method, including window.location.href... but then it keeps going, and loads the wrong page even though newQueryString is correct.
I tried using document.location isntead of window.location.href, and I tried unbinding my searchbox
$(document).ready(function () {
$(".searchBox").unbind();
}
but it didn't work...
You can use preventDefault() method to stop the default event propagation.
$("#myForm").submit(function(event){
event.preventDefault();
});
http://api.jquery.com/event.preventdefault/

map keyboard keys with mootools

I am looking to make the enter key behave exactly like the tab key on a form.
I am stuck on the fireEvent section.
var inputs = $$('input, textarea');
$each(inputs,function(el,i) {
el.addEvent('keypress',function(e) {
if(e.key == 'enter') {
e.stop();
el.fireEvent('keypress','tab');
}
});
});
How do I fire a keypress event with a specified key? Any help would be greatly appreciated.
this will work but it relies on dom order and not tabindex
var inputs = $$('input,textarea');
inputs.each(function(el,i){
el.addEvent('keypress',function(e) {
if(e.key == 'enter'){
e.stop();
var next = inputs[i+1];
if (next){
next.focus();
}
else {
// inputs[0].focus(); or form.submit() etc.
}
}
});
});
additionally, textarea enter capture? why, it's multiline... anyway, to do it at keyboard level, look at Syn. https://github.com/bitovi/syn
the above will fail with hidden elements (you can filter) and disabled elements etc. you get the idea, though - focus(). not sure what it will do on input[type=radio|checkbox|range] etc.
p.s. your code won't work because .fireEvent() will only call the bound event handler, not actually create the event for you.
Take a look at the class keyboard (MooTools More).
It can fire individual events for keys and provides methodology to disable and enable the listeners assigned to a Keyboard instance.
The manual has some examples how to work with this class, here's just a simple example how I implemented it in a similar situation:
var myKeyEv1 = new Keyboard({
defaultEventType: 'keydown'
});
myKeyEv1.addEvents({
'shift+h': myApp.help() // <- calls a function opening a help screen
});
Regarding the enter key in your example, you have to return false somewhere to prevent the enter-event from firing. Check out this SO post for more details.

jQuery: toggleClass event handling function for ajax function

I was wondering if someone can help guide me how I can write a event when I'm using toggleClass in jQuery?
I have a list of items and when I click on an item, it highlights it, and when someone clicks another item from the list, the previous highlighted item goes away and highlights the current click. Also, if I click the same item that has been highlighted, it goes away.
Now I'm trying to write a function to call ajax when only its been highlighted. So it won't run the ajax function again when its being pressed again (when highlight is removed).
$(".media").on('click',function(){
var $this = $(this);
// highlighting the object
$this.toggleClass('selectMedia').siblings().removeClass('selectMedia');
// saving the id
var selId1 = $this.data('id');
$.post("ajax/ajax_sessions.php", {"sel_1":selId1}, function(data) {
alert(data); // alerts 'Updated'
});
});
Thank you for help!
Just check for the existance of the class before doing your AJAX request:
if ( ! $this.hasClass('selectMedia') ) return;
// Now do your AJAX request...

Resources