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.

javascript how to detect keyboard input

when focusing on a certain input,
user press kind of combination key such as "ctrl+e",
I would like to show "ctrl+e" in the input.
next time user press another combination key,
it will clean input and show the new one.
how can I make this?
I look for some javascript plugins,
but they are most for detecting certain input.
like this:
https://github.com/OscarGodson/jKey
$("input").jkey("i",function(){
jkey.log("You pressed the i key inside of an input.");
});
thanks a lot.

Another approach (no plugin needed) it to just use .ctrlKey property of the event object that gets passed in. It indicates if Ctrl was pressed at the time of the event, like this:
$(document).keypress("c",function(e) {
if(e.ctrlKey)
alert("Ctrl+C was pressed!!");
});
Update
$(document).on('keypress','input',function(e){
if ( e.ctrlKey && ( String.fromCharCode(e.which) === 'c' || String.fromCharCode(e.which) === 'C' ) ) {
console.log( "You pressed CTRL + C" );
}
});

Not all browsers allow the catching of cntrl keypress. This would work for the rest
$( document ).keypress(function(e) {
var ch = String.fromCharCode(e.charCode);
if(e.ctrlKey){
console.log('cntrl+'+ch+' was pressed');
}else{
console.log(ch+' was pressed');
}
});

Disable submit a form in html when press Enter key

I have an HTML form with several text fields. So, I want to move cursor from a text field to next text field when I press the enter key, but the form should not be submitted. How can I do this? If there is a code example it may more helpful to me.

press the tab key on your keyboard instead of enter.

I'm using this function to do what you ask for:
$(document).on("keypress", ".TabOnEnter" , function(e)
{
if( e.keyCode == 13 )
{
var nextElement = $('[tabindex="' + (this.tabIndex+1) + '"]');
console.log( this , nextElement );
if(nextElement.length )
nextElement.focus()
else
$('[tabindex="1"]').focus();
}
});
Use the 'TabOnEnte' class on the fields you want this class to apply on.
Also to prevent user from submittin with enter key:
if (e.which == 13) {
e.preventDefault();
}

i got the answer. it should put in the input tag which we want.
onkeydown='if ((event.keyCode == 13 && document.getElementById("field_0").value!="") && event.which == 13){
document.getElementById("field_1").focus();
event.preventDefault();
}'

How do i target or focus drop-down li which is active when a input is focused

JQUERY
$(".share-drop .dropdown-notif").keydown(function (e) {
e.preventDefault();
$(this).parents('.share').find('.share-drop .dropdown-notif').show();
if ($(this).val() == '') {
$('.share-drop .dropdown-notif').hide();
}
if (e.which == 40) {
var next = $('.selected').removeClass('selected').next('li');
next = next.length > 0 ? next : $('.focus li:eq(0)');
next.addClass('selected').children('a').focus();
} else if (e.which == 38) {
var prev = $('.selected').removeClass('selected').prev('li');
prev = prev.length > 0 ? prev : $('.focus li').last();
prev.addClass('selected').children('a').focus();
}
});
I have a drop-down option which will trigger on a keyup function of input text. I need to select those options using my up and down arrow keys I have been trying this using keydown where i couldn't able to move further. Can anyone help me with this. Thanks in advance.
Here is the DEMO

I made a couple of changes to your fiddle and it started working for the up and down key after you do some typing; eg type 'te' then press up and down:
http://jsfiddle.net/c9U3s/2/
The keydown event binding needs to be on the input element itself, and you need to allow preventDefault:
$(".input-hold input").keydown(function (e) {
//e.preventDefault();
and you need an initial selected class somewhere, for your logic to then sucessfully kick in, so I added this to the HTML:
<li class="selected"><a>testmail#test.com</a>
I think there's a couple more bug to step through, (eg what happens when you reach the end of the list with the down key?), but this will hopefully get you started.
This shows you how you can control the scrollTop of the dropdown, so you can scroll to view selected elements:
http://jsfiddle.net/c9U3s/3/
but again, some work needed to refine it to be truly nice.

Disabling/enabling a button based on multiple other controls using Javascript/jQuery

I have a bunch of controls:
When a user clicks the Generate button, a function uses all of the values from the other controls to generate a string which is then put in the Tag text box.
All of the other controls can have a value of null or empty string. The requirement is that if ANY of the controls have no user entered value then the Generate button is disabled. Once ALL the controls have a valid value, then the Generate button is enabled.
What is the best way to perform this using Javascript/jQuery?

This can be further optimized, but should get you started:
var pass = true;
$('select, input').each(function(){
if ( ! ( $(this).val() || $(this).find(':selected').val() ) ) {
$(this).focus();
pass = false;
return false;
}
});
if (pass) {
// run your generate function
}
http://jsfiddle.net/ZUg4Z/
Note: Don't use this: if ( ! ( $(this).val() || $(this).find(':selected').val() ) ).
It's just for illustration purposes.

This code assumes that all the form fields have a default value of the empty string.
$('selector_for_the_parent_form')
.bind('focus blur click change', function(e){
var
$generate = $('selector_for_the_generate_button');
$generate.removeAttr('disabled');
$(this)
.find('input[type=text], select')
.each(function(index, elem){
if (!$(elem).val()) {
$generate.attr('disabled', 'disabled');
}
});
});
Basically, whenever an event bubbles up to the form that might have affected whether the generate button ought to be displayed, test whether any inputs have empty values. If any do, then disable the button.
Disclaimer: I have not tested the code above, just wrote it in one pass.

If you want the Generate button to be enabled as soon as the user presses a key, then you probably want to capture the keypress event on each input and the change event on each select box. The handlers could all point to one method that enables/disables the Generate button.
function updateGenerateButton() {
if (isAnyInputEmpty()) {
$("#generateButton").attr("disabled", "disabled");
} else {
$("#generateButton").removeAttr("disabled");
}
}
function isAnyInputEmpty() {
var isEmpty = false;
$("#input1, #input2, #select1, #select2").each(function() {
if ($(this).val().length <= 0) {
isEmpty = true;
}
});
return isEmpty;
}
$("#input1, #input2").keypress(updateGenerateButton);
$("#select1, #select2").change(updateGenerateButton);
The above assumes that your input tags have "id" attributes like input1 and select2.