Develop Reference

jQuery (attach, detach, reattach) event handlers issues

What I'm trying to do is to make a Datatable Editable. So the feature flow is this.
When clicking a cell, an input will be CREATED. So, whatever the cell has, it will be overwritten and moved to the value of the created input. (see an example of DataTables Editor, it works like that.)
Upon blur of the input. (Pressing Enter Key also triggers blur)
a. If the value is unchanged, it will return to a normal cell (with its value unchanged of course)
b. If the value was changed, it will stay as an input.
So, if I made an edit to a cell, it should stay as an input upon blur, but if I made an edit to that cell again, this time to input the original value, UPON BLUR, it should NOW shrink back into a cell.
But something weird is happening. This is the flow.
I click one cell, edit, make it lose focus. (so it will stay as an input)
I click another cell, edit, make it lose focus. (it will also stay as an input)
Now, when I click the cell that I've edited first, and retain it back to its original value. UPON BLUR, the cell which I've edited second, also returns back into a cell!
I'm suspecting a scope/reference issue here.
Feel free to see my working code in JSFiddle to understand the problem more.
JSFiddle: http://jsfiddle.net/UvjnT/2512/
For the JSFiddle, try to do these (in first row):
Click cell with Trident value.
Edit it, like add a letter. Like: aTrident
Now lose the focus, it will stay as an input.
Try clicking the cell with Internet value.
Edit it, for me it was: aInternet
Lose focus. It will remain as an input.
Now click the cell with aTrident value.
Edit it back to Trident.
See the bug happen.
To prove you that the feature is working and there's just a bug.
Try editing a cell, lose focus, edit it again to its original value, and watch it shrink back into a cell. :D
Help would be greaaaaaaat! :)
I'm running the following code on each on click of a td element inside the table.
el.html('<input class="table-edit form-control input-sm" type="text" value="' + val + '" />');
el.off('click');
input = el.children('input').first();
input.focus();
input.on('keyup', function(e) {
if (e.which == 13) {
$(this).blur();
}
});
input.on('blur', function(e) {
newVal = $(this).val();
if (val == newVal) {
input.css('font-weight', 'normal');
input.parent('td').css('outline', 'none');
input.off('blur keyup');
input.fadeOut('fast', function() {
el.html(val);
toInput(el, val);
});
} else {
input.parent('td').css('outline', '1px solid #F79421');
}
});

It seems like the problem was here:
input.fadeOut('fast', function() {
el.html(val);
toInput(el, val); // <- this
});
Correction: You forgot add var at newVal = $(this).val();.
This caused the variable newVal to be defined globally.
Corrected JSFiddle

How to focus a hidden input field

I'm new to JS and trying to make an input field that that only appears when the user types anywhere on the page. Currently, the appearing of the input field works but once it's visible, the user still has to click into the field to type in it.
I would like it to work like:
User presses "S"
Field appears with "S" typed in it.
Any help would be much appreciated!
http://codepen.io/jeremypbeasley/pen/RNrore
var searchArea = $(".search");
searchArea.hide();
$(document).ready(function() {
$( "body" ).keydown(function() {
searchArea.show();
searchArea.elements['input'].focus();
console.log("worked!");
});
});

What is searchArea.elements['input'] supposed to do ?
Try it like this instead, using jQuery's find method
$( "body" ).on('keydown', function() {
searchArea.show().find('input').focus();
});
PEN

You need to find the input element within the seach area, then call focus() on it:
$(document).ready(function() {
var $searchArea = $(".search").hide();
$("body").keydown(function() {
$searchArea.show();
$searchArea.find('input').focus();
});
});
Updated CodePen

Or just set id to input field (<input autofocus="autofocus" id="hid_inp" >)
and use $("#hid_inp").focus(); instead of searchArea.elements['input'].focus();"

Listen for input in a hidden input-field

Is there a way, on document ready / page load, one can listen for more than three characters being typed in a row that don't do anything else, while nothing else is focused, and if that event occurs transfer those three characters and anything else that is typed after into an input-field of type text / search that is hidden — either by the display, visibility, or opacity CSS properties?
I would appreciate any help in doing this.
I have done something like this with a label and radio-button / check-box that is hidden. But that is because the input is just a click on the label. Not as complex as alpha-numeric input.
If you can help me with any part of achieving the above, I would greatly appreciate it.

Should be straight forward:
var keys = [];
$(document).on('keypress', function(e) {
keys.push( String.fromCharCode(e.which) );
if (keys.length > 2)
$('input').fadeIn(400).val( keys.join('') );
});
FIDDLE

Your question is vague, but what you could do is call .focus() on the input whenever any other input has the event onblur and use the oninput event for your hidden field.

You can bind keypress to the document and store the result in a variable until you're ready, something like:
var typedString = "";
$(document).keypress(function(e){
typedString += String.fromCharCode(e.keyCode);
if(typedString.length >= 3){
$('#some-textbox').show();
$('#some-textbox').val(typedString);
}
});

Type into a field, and use jQuery/JS to display this value lower on the page

I have a simple task which I'm failing at.
I want to take this field:
<input id="amount" name="amount" value="{$formRefill.amount}" class="textInput auto required validateNumber" type="text">
And once the user has typed a value in there (i.e. 950.50), and they click outside of text field (focus somewhere else), jQuery takes this field and displays it somewhere else on the page.
I was trying to do this inside of a DIV lower down the page.
Thanks.

You need to use change event of the input field:
$('#amount').change(function() {
$('#mydivid').text($(this).val());
});
Code: http://jsfiddle.net/yg9gF/2/

you should use keyup which will update the div on every char entered.
$('#amount').on('keyup',function() {
$('#mydiv').text($(this).val());
});
fiddle : http://jsfiddle.net/yg9gF/11/

you can use the blur() or the change() event. Use change if you want the value to copy only when it has been changed, or blur if you want it to copy regardless.
$('#myText').blur(function () {
$('#myDiv').text($(this).val());
});
http://jsfiddle.net/AAyyq/

how to change the value of a Div according to whats typed into a form input

I know if I want to change the value of an input on a form according to what a user types into another input using:
$('#inputName').change(function() {
$('#inputURL').val($('#inputName').val());
});
But I'd like to have it so when someone types into the input it updates a Div with the text instead. IE they type into #inputName and this happens:
<div id="personsName"> text appears here as they type</div>
How'd I go about doing that? I doesn't work when I change #inputURL into #personsName :(

The change event is only triggered when leaving the textfield, so use keypress instead if you really want to "update the text on typing into a text field". .val only applies to form elements which actually have a value (e.g. <input> and <textarea> elements). In all other cases, you need the text method for modifying the text .
$("#inputName").keypress(function () {
$("#personName").text(this.value);
});
You can test this code here: http://jsfiddle.net/ntBnA/

You're almost there:
$('#inputName').change(function() {
$('#personsName').text($('#inputName').val());
});

//Cache this bad boy, its being repeatedly used!
var personsName = $('#personsName');
$('#inputName').bind({
keyup: function () {
//This is what you want.
personsName.text($(this).val());
},
change: function () {
//This is what you were doing. See the difference?
$('#inputURL').val($(this).val());
}
});