We Keep Coding

Validate contenteditable on enter and not on clicking

I'm using contenteditable so as people can edit a text.
So when you edit the text thas has contenteditable = true, if you click somewhere else in the page, it will "validate" your text and replace the older.
That's not the comportment I'd like it to have because the user has no way to get back to the older text except by refreshing the page.
To me, it should validate the text only if you press the Enter Key and not if you click somewhere else. If you click somewhere else then it should get back to the older text.
Any idea how to make it ?
Thanks ! :)

When the user clicks the box, you can store its value into a var, and when they click away, reset the box to that var.
If the Enter key doesn't already validate, here's some pseudocode as to what you could do:
var oldvalue = "";
function OnClickBox() {
oldvalue = (yourelement).value;
}
function OnClickAway() {
(yourelement).value = oldvalue;
}
function Validate() {
(yourelement).value = yourvalidationfunction(yourelement.value);
}
document.onkeydown = function (e) {
key = e.which || e.KeyCode;
if (e.keyCode === 16) { //enter key
Validate();
}
}
Then you assign the box's onclick to OnClickBox(), and unselecting the box to OnClickAway().
And for future posts, please include some code as to what you have tried already, and for better context as to your question.

Trigger a "ENTER" in programmatically

It is possible to program a "Enter" after a value is added to a input text box?
If yes, I need help on my code below. It does't trigger the "ENTER" keypress.
My code as below:
$('#clo_cart').click( function () {
/*Save ENTER in variable*/
var eneterKey = jQuery.Event("keydown");
eneterKey.which = 13;
eneterKey.keycode = 13;
$("#scan_char").focus().val('CLOSECTN').trigger(eneterKey);
}//end of button click
Pls Help

Just replace the keydown event with keypress event. There are some differences between how they use event.which property. This might be one of the cases where the two of them use different values for event.which.
var eneterKey = jQuery.Event("keypress");
Also note that which property has been deprecated. You can compare with the event.key property. It should have value Enter when the enter key is to be simulated.
$('#clo_cart').click( function () {
/*Save ENTER in variable*/
var eneterKey = jQuery.Event("keydown");
eneterKey.key = 'Enter';
$("#scan_char").focus().val('CLOSECTN').trigger(eneterKey);
}

You can use this code,
$('#clo_cart').click( function () {
var e = $.Event( "keypress", { which: 13 } );
$("#scan_char").focus().val('CLOSECTN').trigger(e);
}//end of bu

This code below work fine for me.
$('#clo_cart').click( function () {
$("#scan_char").focus().val('CLOSECTN').trigger(enterKey());
}//end of button click
/* Function to allow program keypress ENTER */
function enterKey() {
return $.Event( "keypress", { which: 13 } );
}

SImulate "Enter pressing" when submit button is clicked

When my submit Button in the form is clicked, I need to simulate that the "Enter button" is pressed. so: clicking on the submit form is equal to pressing Enter on the keyboard. Because I want to have the same method for both...
Here is what I have, but until now it doesnt works..
$(document).on('click', '#send', function(){
$("#chatMessageTextarea").focus();
var e = jQuery.Event("keypress");
e.which = 13;
e.keyCode = 13;
});

try something like this, not tested it, hope it helps!
function keyUpFunc(e) {
var keyCode_Enter = 13;
if (e.keyCode === keyCode_Enter) {
e.preventDefault();
$('#send').trigger("click");
}
}
$(document).keyup(keyUpFunc);
$(document).on('click', '#send', function(){
// Click Event handler for send
});

I am not sure what are you trying to achieve here. But if you want that I think this link has answer to simulate keypress via jQuery.
Definitive way to trigger keypress events with jQuery
Copied code from link:
var e = jQuery.Event("keydown");
e.which = 13; // # Some key code value
$("input").trigger(e);

Try this:
$(document).on('click', '#send', function(){
$("#chatMessageTextarea").trigger({
type: "keypress",
which: 13,
keyCode: 13});
});
hope it helps!

How make an action run only when the field becomes unselected?

Right now the value of an input text field changes upon the successful match in my code. It looks like this:
if(jsonResponse.id != null) {
document.getElementById('product_id').value = jsonResponse.id;
}
The problem is that if, i.e., I have a product with id=200 and a product with id=2003, then when a user wants to search for 2003, the moment the typed value is 200 - the input field text will change with the corresponding answer for 200, instead of 2003. This is not convenient.
So my goal is to add some additional check (or something like that), that will allow document.getElementById('product_id').value = jsonResponse.id; only after the cursor is not anymore in the input text field (when the field is not selected anymore).

To run a function when a text field loses focus, you can use jQuery's blur event handler:
$('.mytextfield').blur(function(){
var value = $(this).val();
// use value
});
jsbin example

You wait for user to press enter, as soon as user press the enter then process the text.
document.onkeypress = function(e) {
e = e || window.event;
var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
if (charCode==13) { //ENTER PRESSED
/* your code */
}
};

You can do also like this:
<input type="text" name="name" value="" onblur="yourFunction();"/>
Or by Jquery.

jQuery - triggering multiple events one by one

I'm using jquery tagsInput plugin where I need to dynamically modify the query(deleting the query or entering the new query) without actually typing in the search box connected with tagsInput plugin.
My problem here is I want to trigger backspace event at first then enter event next. Here is the code.
function triggering_events() {
$(".tag").each(function() {
var e = jQuery.Event("keydown");
e.keyCode = 8;
e.which = 8;
$("#input-search_tag").trigger(e); //triggering backspace event
});
var input = $("#input-search_tag");
input.val("food");
input.trigger(e); //triggering enter event
}
But only the backspace event is triggering from the above code. How can I make that enter event work?
Could anyone point out the mistake I've done?
Thanks!

you can try use the methods removeTag and addTag for remove and add tag's:
function triggering_events() {
var
idInput = 'input-search',
input = $("#" + idInput);
$("#"+idInput+"_tagsinput .tag").each(function() {
var tag = $.trim($(this).find('span:eq(0)').text());
input.removeTag(tag);
});
input.addTag("food");
}
run

There is an issue here:
$("#input-search_tag").val("food").trigger(e); //triggering enter event
.val() returns you a string value of the jquery Element, it is not a chainable method. strings do not have a trigger method.
You could fix this by splitting it into two calls:
var input = $("#input-search_tag");
input.val("food");
input.trigger(e); // triggering enter event
Or using .end():
$("#input-search_tag").val("food").end().trigger(e); //triggering enter event
Edit: putting it all together, along with reusing one event instead of creating multiples:
function triggering_events() {
var e = jQuery.Event("keydown");
e.which = 8;
$(".tag").each(function() {
$("#input-search_tag").trigger(e); // triggering backspace event
});
e.which = 13;
$("#input-search_tag").val("food").end().trigger(e); // triggering enter event
}