Develop Reference

Datatable search result add to cart enter key

I have joined a script called jquery.mycart with datatable.
document.onkeydown = function(evt) {
evt = evt || window.event;
var isEscape = false;
if ("key" in evt) {
isEscape = (evt.key == "Enter" || evt.key == "Enter");
} else {
isEscape = (evt.keyCode == 13);
}
if (isEscape) {
table.rows( { search:'applied' } ).data().each(function(value, index) {
console.log(value, index);
});
}
};
I have a problem that when we suppose we search for "Antalgina" when we press enter this search is added to the shopping cart. (look at the console).
Full code
https://codepen.io/anon/pen/oaQJNg
Please how could I do it or give me some hint
I hope you can help me.

Working codePen.
You could a simple jQuery event like :
$("document").on('onkeydown', function (e) {
if (e.keyCode !== 13) {
table.rows( { search:'applied' } ).data().each(function(value, index) {
console.log(value, index);
});
});
});

Detect difference between key combination and single key

How can I detect the difference between a single CTRL key and a CTRL + 1 key combination?
Currently I have the following:
window.addEventListener('keydown', function(e) {
if(e.keycode === 17){
alert('crtl only')
}
else if (e.ctrlKey && e.keyCode == 49) {
alert('crtl + 1');
}
}

When the key(s) are hit, make a note of the time. Then compare it with the time you noted the last time they key(s) were hit.
If the difference is within your threshold, consider it a double. Otherwise, don't.
If the difference is within your threshold, consider it a double. Otherwise, don't.
Rough example:
var delta = 500;
var lastKeypressTime = 0;
function KeyHandler(event)
{
if ( event.ctrlKey
&& String.fromCharCode(event.charCode).toUpperCase()) == 'T' )
{
var thisKeypressTime = new Date();
if ( thisKeypressTime - lastKeypressTime <= delta )
{
doDoubleKeypress();
// optional - if we'd rather not detect a triple-press
// as a second double-press, reset the timestamp
thisKeypressTime = 0;
}
lastKeypressTime = thisKeypressTime;
}
}

This should work:
window.addEventListener('keydown', function (e) {
if (e.ctrlKey && e.keyCode === 49){
alert('combo hit!');
}
}

Use debounce with keydown
function KeyPress(e) {
var evtobj = window.event ? event : e;
debouce(function(evtobj) {
if (evtobj.keyCode == 65 && evtobj.ctrlKey) {
console.log("Ctrl+a");
evtobj.preventDefault();
} else if (evtobj.ctrlKey) {
console.log("Only ctrl");
}
}, evtobj, 200);
}
Demo
function KeyPress(e) {
var evtobj = window.event ? event : e;
debouce(function(evtobj) {
if (evtobj.keyCode == 65 && evtobj.ctrlKey) {
console.log("Ctrl+a");
evtobj.preventDefault();
} else if (evtobj.ctrlKey) {
console.log("Only ctrl");
}
}, evtobj, 200);
}
function debouce(method, eventObj, debounceTime) {
if (this.timeoutId)
clearTimeout(this.timeoutId);
this.timeoutId = setTimeout(function() {
method(eventObj);
}, debounceTime);
}
document.onkeydown = KeyPress;

Not all code paths return a value (JavaScript)

document.getElementById('search_field').onkeypress = function(e) {
if (!e) e = window.event;
var keyCode = e.keyCode || e.which;
if (keyCode == '13') {
window.location.href = '/search/?s=' + $('#search_field').val();
return false;
}
};
The last bracket show me an error, not all code paths return a value, what seems to be problem here ?
Thanks

Try this :
document.getElementById('search_field').onkeypress = function(e) {
if (!e) {
e = window.event;
}
var keyCode = e.keyCode || e.which;
if (keyCode == '13') {
window.location.href = '/search/?s=' + $('#search_field').val();
return false;
}
return true;
};
More... I think that you may not use both pure javascript and jquery
So you'd rather choose between
JAVASCRIPT :
document.getElementById('search_field').onkeypress = function(e) {
if (!e) e = window.event;
var keyCode = e.keyCode || e.which;
if (keyCode == '13') {
window.location.href = '/search/?s=' + document.getElementById('search_field').value;
return false;
}
return true;
};
JQUERY
$( "#search_field" ).keypress(function( event ) {
if ( event.which == 13 ) {
event.preventDefault();
window.location.href = '/search/?s=' + $(this).val();
return false;
}
return true;
});

End your function with return true.
If any other key then 13 is pressed the flow should just continue normally.

Ignore your tool. Event handlers do not have to return a value in every occasion, it is fine if only a particular path does return false.

Validate input value before it is shown to user

I have an html <input> and some pattern (e.g. -?\d*\.?\d* float-signed value).
I should prevent typing the not matched value.
I did it in next way
jQuery.fn.numeric = function (pattern)
{
var jqElement = $(this), prevValue;
jqElement.keydown(function()
{
prevValue = jqElement.val();
})
jqElement.keyup(function(e)
{
if (!pattern.test(jqElement.val()))
{
jqElement.val(prevValue);
e.preventDefault();
}
prevValue = ""
})
};
JSFiddle DEMO
But in this case, value is shown to user and then corrected to right value.
Is it way to vaidate value before it is shown to user?
I can use pattern attribute from html5

$("#validateMe").on('keydown', function() {
var charBeingTyped = String.fromCharCode(e.charCode || e.which); // get character being typed
var cursorPosition = $(this)[0].selectionStart; // get cursor position
// insert char being typed in our copy of the value of the input at the position of the cursor.
var inValue = $(this).value().substring(0, cursorPosition) + charBeingTyped + $(this).value().substring(cursorPosition, $(this).value().length);
if(inValue.match(/-?\d*\.?\d*/)) return true;
else return false;
});

How about this POJS, I'm using a cross-browser addEvent function instead of jquery and not using any regexs, but I believe it achieves what you are looking for. Pressing + or - changes the sign of the value.
HTML
<input id="test" type="text" />
Javascript
/*jslint maxerr: 50, indent: 4, browser: true */
(function () {
"use strict";
function addEvent(elem, event, fn) {
if (typeof elem === "string") {
elem = document.getElementById(elem);
}
function listenHandler(e) {
var ret = fn.apply(null, arguments);
if (ret === false) {
e.stopPropagation();
e.preventDefault();
}
return ret;
}
function attachHandler() {
window.event.target = window.event.srcElement;
var ret = fn.call(elem, window.event);
if (ret === false) {
window.event.returnValue = false;
window.event.cancelBubble = true;
}
return ret;
}
if (elem.addEventListener) {
elem.addEventListener(event, listenHandler, false);
} else {
elem.attachEvent("on" + event, attachHandler);
}
}
function verify(e) {
var target = e.target, // shouldn't be needed: || e.srcElement;
value = target.value,
char = String.fromCharCode(e.keyCode || e.charCode);
if (value.charAt(0) === "-") {
if (char === "+") {
e.target.value = value.slice(1);
}
} else if (char === "-") {
e.target.value = char + value;
return false;
}
value += char;
return parseFloat(value) === +value;
}
addEvent("test", "keypress", verify);
}());
On jsfiddle
I think I used the correct values keyCode || charCode
but you may want to search and check. A summary of the correct ones are available here

You could use this code to find out what character is pressed. Validate that character and, if it validates, append it to the input field.

Try this code:
jQuery.fn.numeric = function (pattern)
{
$(this).keypress(function(e)
{
var sChar = String.fromCharCode(!e.charCode ? e.which : event.charCode);
e.preventDefault();
var sPrev = $(this).val();
if(!pattern.test(sChar)){
return false;
} else {
sPrev = sPrev + sChar;
}
$(this).val(sPrev);
});
};
$("#validateId").numeric(/^-?\d*\.?\d*$/);
jsfiddle.net/aBNtH/
UPDATE:
My example validates each charachter while typing. If you prefer to check the entire value of the input field instead, I would suggest to validate the value on an other Event, like Input blur().

Event is not defined error in javascript only Firefox

I use the following script to validate the text box to enter only numbers and (.) which means it is decimal textbox validation. It was work fine in Internet Explorer and Google Chrome. If I execute the function in FireFox I get the following Error:
Event Is not Defined.
How to solve this?
function abc(event) {
if (event.keyCode > 47 && event.keyCode < 58) {
return true;
}
if (event.keyCode == 8 || event.keyCode == 46)
{
return true;
}
return false;
}
I call this function like this:
$('.decimalValidate').live('keypress',function(){
var decimalid=$(this).attr("id");
var decimalval=$('#'+decimalid).val();
var decimalvalidate=abc(decimalval);
if(decimalvalidate == false)
return false;
});
I assign this validation for text box like this:
input type="text" id="Total" class="abc"

Try this
function abc(event) {
if(!event)
event= window.event;
if (event.keyCode > 47 && event.keyCode < 58) {
return true;
}
if (event.keyCode == 8 || event.keyCode == 46)
{
return true;
}
return false;
}
and
$('.decimalValidate').live('keypress',function(e){
var decimalid=$(this).attr("id");
var decimalval=$('#'+decimalid).val();
var decimalvalidate=abc(evt); //keypress event
if(decimalvalidate == false)
return false;
});

decimalval is not an Event object, and you have to pass it to the abc function in ordert to find out which key you pressed:
$('.decimalValidate').live('keypress',function(ev){
var decimalid=$(this).attr("id");
var decimalval=$('#'+decimalid).val();
var decimalvalidate=abc(ev);
if(decimalvalidate == false)
return false;
});

$('.decimalValidate').live('keypress',function(e){
var decimalvalidate=abc(e); //this will point to the event of the keypress.
if(decimalvalidate == false)
return false;
});
I am not sure why you did all of the decimalid and decimalval operations, but if you want the event, do as I wrote in the edited code above.
Good luck.

$('.decimalValidate').on('keypress',function(event){
var decimalid = $(this).attr("id");
var decimalval = $('#'+decimalid).val();
var decimalvalidate = abc(event);
if(decimalvalidate == false)
return false;
});
function abc(event) {
if (event.keyCode > 47 && event.keyCode < 58) {
return true;
}
if (event.keyCode == 8 || event.keyCode == 46)
{
return true;
}
return false;
}
It helps you..