I have the following jQuery/js controlling a trello style input field. So when you click on the span element, it switches to an input field. Then after you finish editing the element and take focus away from it(blur), it switches back to the span element with the new text. I also having it submitting to an ajax script to submit the new text to my database.
Now this all works flawlessly and I have no problems with what is described above. The problem came when I tried to make the "switch back to the span element" work on "enter" key press.
I have tested the code with an alert so I know the enter key is being detected but I can not get the "editableTextBlurred" function to fire from within the keypress function. Which means that it will not switch back to the span element on enter press.
function divClicked(div) {
div = "#"+div;
var divHtml = $(div).text();
var editableText = $('<input type="text" id="firstname" name="firstname" placeholder="First Name" onChange="profileUpdate(this)">');
editableText.val(divHtml);
$(div).replaceWith(editableText);
editableText.focus();
console.log(editableText);
// setup the blur event for this new textarea
editableText.blur(editableTextBlurred);
$(":input").keypress(function(event) {
if (event.which == '13') {
event.preventDefault();
editableTextBlurred();
}
});
}
function editableTextBlurred() {
var html = $(this).val();
var viewableText = $("<span id='firtname_text' onClick='divClicked(this.id)'></span>");
viewableText.html(html);
$(this).replaceWith(viewableText);
}
<span id='firtname_text' onClick='divClicked(this.id)'>
".ucfirst($fname)."
</span>
Any insight on what I missing or doing wrong will be greatly appreciated,
Thanks!
I suspect it's successfully calling editableTextBlurred, but then that function isn't working. And the reason it's not working is that it expects this to refer to the input element, but the way you're calling it, this will be the global object (in loose mode) or undefined (in strict mode).
To make the this in editableTextBlurred the same as the this in the keypress handler, use .call:
editableTextBlurred.call(this);
Alternately, just pass the element as an argument:
editableTextBlurred(this);
...and then
function editableTextBlurred(input) {
var html = $(input).val();
var viewableText = $("");
viewableText.html(html);
$(input).replaceWith(viewableText);
}
Separately, there's a problem with that onClick code, it will end up with this.id (the actual text) in the onClick attribute. You probably wanted:
var viewableText = $("<span id='firtname_text' onClick='divClicked(\"'" + input.id + "'\")'></span>");
...though I wouldn't use onClick for this at all; use jQuery.
Rather than adding/removing event handlers, this is the kind of situation that cries out for event delegation:
// Delegated handler for converting to inputs
$("#container").on("click", ".click-to-edit", function(e) {
var $div = $(this),
$input = $("<input type=text>");
$div.toggleClass("click-to-edit editing");
$input.val($div.text());
$div.empty().append($input);
setTimeout(function() { // Some browsers want this delay
$input.focus();
}, 50);
});
// Delegated handler for converting back
$("#container").on("keypress", ".editing input", function(event) {
var $input = $(this), $div;
if (event.which == 13) {
event.preventDefault();
$div = $input.closest(".editing");
$div.toggleClass("click-to-edit editing");
$div.empty().text($input.val());
}
});
<div id="container">
<div class="click-to-edit">Testing 1 2 3</div>
<div class="click-to-edit">Testing 4 5 6</div>
<div class="click-to-edit">Testing 7 8 9</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Related
I’m trying to remove an input field by clicking an “X button”. After it is removed it will not post its value when the form is submitted. A “+ button” appears that allows the user to add said input again. The input has an onclick event that opens a calendar and after reattaching, the calendar does not open on click anymore. I can’t use jQuery.
adderBtn.onclick = function (e) {
var elem = that.hiddenElems.shift();
that.collectionItemContainer.append(elem);
}
removerBtn.onclick = function (e) {
collectionItemElem.remove();
that.hiddenElems.push(collectionItemElem);
}
The question is how do I remove and reattach DOM nodes without losing the Events.
When you remove an element, as long as you keep a reference to it, you can put it back. So:
var input = /*...code to get the input element*/;
input.parentNode.removeChild(input); // Or on modern browsers: `input.remove();`
later if you want to put it back
someParentElement.appendChild(input);
Unlike jQuery, the DOM doesn't distinguish between "remove" and "detach" — the DOM operation is always the equivalent of "detach," meaning if you add the element back, it still has its handlers:
Live Example:
var input = document.querySelector("input[type=text]");
input.addEventListener("input", function() {
console.log("input event: " + this.value);
});
input.focus();
var parent = input.parentNode;
document.querySelector("input[type=button]").addEventListener("click", function() {
if (input.parentNode) {
// Remove it
parent.removeChild(input);
} else {
// Put it back
parent.appendChild(input);
}
});
<form>
<div>
Type in the input to see events from it
</div>
<label>
Input:
<input type="text">
</label>
<div>
<input type="button" value="Toggle Field">
</div>
</form>
If you remove the element without keeping any reference to it, it is eligible for garbage collection, as are any handlers attached to it (provided nothing else refers to them, and ignoring some historic IE bugs in that regard...).
To detach an element in function form:
function detatch(elem) {
return elem.parentElement.removeChild(elem);
}
This will return the 'detached' element
I have a very simple jQuery UI spinner as follows:
<input value="2" class="form-control ui-spinner-input" id="spinner" aria-valuemin="2" aria-valuemax="24" aria-valuenow="2" autocomplete="off" role="spinbutton" type="text">
Using jQuery I set the above text box readonly true/false. The readonly and value is set based on the checkbox a user selects and that function looks like
function checkBoxes() {
var $targetCheckBoxes = $("#BoxFailure,#InstallationFailure");
$targetCheckBoxes.change(function () {
var isChecked = this.checked;
var currentElement = this;
var $radioButton = $('.usage-failure-type-radio');
$targetCheckBoxes.filter(function () {
return this.id !== currentElement.id;
}).prop('disabled', isChecked);
$('#spinner').val(isChecked ? this.value : '').prop('readonly', isChecked);
$radioButton.first().prop('checked', isChecked);
$radioButton.not(':checked').toggle(!isChecked).parent('label').toggle(!isChecked);
$('.usage-before-failure > div > span.ui-spinner > a').toggle(!isChecked);
});
}
Now what I'm trying to achieve is when the #spinner input is readonly and if the user presses the back space I want to prevent the default behaviour e.g. do navigate away from the page. For this I thought I'd do the following:
$('.prevent-default').keydown(function (e) {
e.preventDefault();
});
Which works fine if the input has the class prevent-default on page load. However, if I add it in my checkBoxes function in the following line
$('#spinner').val(isChecked ? this.value : '').prop('readonly', isChecked).toggleClass('prevent-default')
Then I press the backspace it ignores e.prevenDefault();
But if I do
$('#spinner').val(isChecked ? this.value : '').prop('readonly', isChecked).keydown(function (e) { e.preventDefault(); });
Then it works absolutely fine.
Can someone tell me why this is happening please.
The reason I want to use a separate function with a class name is because I have various inputs which get set to read only based on different check/radio values.
Can someone tell me why this is happening please
This is because of the DOM parser and the timing when JavaScript is executed.
If you already have an element with a class prevent-default in your DOM before JS is executed, then the JavaScript will recognise and handle it correctly. If you instead add the class afterwards with JS, then you have to re-initialise the keydown-event again to make it work.
To re-initialise you will need something like this:
function checkBoxes() {
var $targetCheckBoxes = $("#BoxFailure,#InstallationFailure");
$targetCheckBoxes.change(function () {
...
$('#spinner').val(isChecked ? this.value : '').prop('readonly', isChecked).toggleClass('prevent-default');
// assign new keydown events
handleKeyDown();
...
});
}
function handleKeyDown() {
// release all keydown events
$('#spinner').off( "keydown", "**" );
$('.prevent-default').keydown(function (e) {
e.preventDefault();
// do more stuff...
});
}
Update
It appears that the input is locked until I input a well formatted email address and then and only then is the element able to be unlock/unfocus. That is just weird, because if I can't focus any other element then how can the unfocus event get trigger when the current element is still focus. Do you suppose it has to do with something on the server side then?
So I have this piece of code that has an input html generated by the server so I can not directly do the onblur=function() in the tag. Instead I use the onclick event of the td to bind an event handler to the input.
<td id="emailInput" class="label" onclick="emailValidation(event);">
#Html.EditorFor(model => Model.EmailAddress, new { Class = "ignore"})
</td>
<td id="emailValidate" style="display: none">
<label>Please enter a valid email address</label>
</td>
in the Javascript file I bind the event handler like so:
function emailValidation(e) {
$(e.target).on("blur", function () {
console.log("what target e is");
console.log(e.target);
var inputVal = $(e.target).val();
var re = /[A-z0-9]*[\.?[\w+]+[A-z0-9]+#[A-z0-9][\.?[\w+]+\.[A-z][A-z][A-z]/;
if (!re.test(inputVal)) {
$(e.target).focus();
$("#emailValidate").css("display", "inline-block");
} else {
$("#emailValidate").css("display", "none");
}
});
}
I check the dev console and e.target is the input element I want. What is happening is that the onblur event in being trigger after it has been appended and the input is unfocus even though the input element is no longer focus, and I am just clicking random area in the screen. Am I mis-understanding something? Is there a better definition that I can get than the w3school, the developer.mozilla, and this weird one
EDIT
I was trying to create a JSfiddle (w/o server stuff) to demonstrate and it worked fine so upon closer inspection I see the the input element is not being unfocus. It does not matter where I click the cursor remains in the text area, and no other element can be focus now.
Edit 2
As requested the JSFiddle, but it works here but not on the one with server side stuff
Here is a working fiddle:
http://jsfiddle.net/Mn5E4/1/
$("#emailMe").on("blur", function () {
var inputVal = $(this).val();
var re = /[A-z0-9]*[\.?[\w+]+[A-z0-9]+#[A-z0-9][\.?[\w+]+\.[A-z][A-z][A-z]/;
if (!re.test(inputVal)) {
$("#emailMe").focus();
$("#emailValidate").css("display", "inline-block");
} else {
$("#emailValidate").css("display", "none");
}
});
You don't need to bother with using the click event to attach the handler since you know the id of the input you want to bind to.
Edit: Note that this is a fork of your jsFiddle. Based on the code in your question, I would expect the id of the desired input element to be "EmailAddress", in which case you would replace $("#emailMe") with $("#EmailAddress").
Edit2: You can take out any guesswork by doing this:
<td id="emailInput" class="label">
#Html.EditorFor(model => Model.EmailAddress, new { #class = "ignore validateEmail"})
</td>
<td id="emailValidate" style="display: none">
<label>Please enter a valid email address</label>
</td>
<script type='text/javascript'>
$(".validateEmail").on("blur", function () {
var inputVal = $(this).val();
var re = /[A-z0-9]*[\.?[\w+]+[A-z0-9]+#[A-z0-9][\.?[\w+]+\.[A-z][A-z][A-z]/;
if (!re.test(inputVal)) {
$(".validateEmail").focus();
$("#emailValidate").css("display", "inline-block");
} else {
$("#emailValidate").css("display", "none");
}
});
</script>
Note that I passed another class into the EditorFor helper and changed how the class attribute was named to use # to escape the lower case name "class".
Please try this aproach:
<td id="emailInput" class="label" onclick="emailValidation(event);">
#Html.EditorFor(model => Model.EmailAddress, new { Class = "ignore"})
</td>
$("#emailInput").on('focusin', "input", function (e) {
var inputobj = $(this);
var inputVal = inputobj.val();
var re = /[A-z0-9]*[\.?[\w+]+[A-z0-9]+#[A-z0-9][\.?[\w+]+\.[A-z][A-z][A-z]/;
if (!re.test(inputVal)) {
inputobj.focus();
$("#emailValidate").css("display", "inline-block");
} else {
$("#emailValidate").css("display", "none");
}
})
Note: Not tested
You should use $(this)
var inputVal = $(this).val();
I am developing web app, I have such a requirement that whenever user click on text inside span i need convert it into input field and on blur i need to convert it back to span again. So i am using following script in one of my jsp page.
Java Script:
<script type="text/javascript">
function covertSpan(id){
$('#'+id).click(function() {
var input = $("<input>", { val: $(this).text(),
type: "text" });
$(this).replaceWith(input);
input.select();
});
$('input').live('blur', function () {
var span=$("<span>", {text:$(this).val()});
$(this).replaceWith(span);
});
}
JSP Code:
<span id="loadNumId" onmouseover="javascript:covertSpan(this.id);">5566</span>
Now my problem is, everything works fine only for the first time. I mean whenever i click on the text inside span for the first time it converts into input field and again onblur it coverts back from input field to normal text. But if try once again to do so it won't work. Whats wrong with above script?
Would be good to change your dom structure to something like this (note that the span and the input are side by side and within a shared parent .inputSwitch
<div class="inputSwitch">
First Name: <span>John</span><input />
</div>
<div class="inputSwitch">
Last Name: <span>Doe</span><input />
</div>
Then we can do our JS like this, it will support selecting all on focus and tabbing to get to the next/previous span/input: http://jsfiddle.net/x33gz6z9/
var $inputSwitches = $(".inputSwitch"),
$inputs = $inputSwitches.find("input"),
$spans = $inputSwitches.find("span");
$spans.on("click", function() {
var $this = $(this);
$this.hide().siblings("input").show().focus().select();
}).each( function() {
var $this = $(this);
$this.text($this.siblings("input").val());
});
$inputs.on("blur", function() {
var $this = $(this);
$this.hide().siblings("span").text($this.val()).show();
}).on('keydown', function(e) {
if (e.which == 9) {
e.preventDefault();
if (e.shiftKey) {
$(this).blur().parent().prevAll($inputSwitches).first().find($spans).click();
} else {
$(this).blur().parent().nextAll($inputSwitches).first().find($spans).click();
}
}
}).hide();
I understand you think that element replacement is a nice thing, however, I would use a prompt to get the text. Why? It is a lot easier and actually a bit prettier for the user as well. If you are curious on how to do it, I show you.
html:
<span class='editable'>foobar</span>
js:
$(function()
{
$('span.editable').click(function()
{
var span = $(this);
var text = span.text();
var new_text = prompt("Change value", text);
if (new_text != null)
span.text(new_text);
});
});
http://jsfiddle.net/qJxhV/1/
First, you need to change your click handler to use live() as well. You should take note, though, that live() has been deprecated for quite a while now. You should be using on() in both cases instead.
Secondly, when you replace the input with the span, you don't give the element an id. Therefore, the element no longer matches the selector for your click handler.
Personally, I would take a different (and simpler) approach completely. I would have both the span and in the input in my markup side by side. One would be hidden while the other is shown. This would give you less chance to make mistakes when trying to recreate DOM elements and improve performance since you won't constantly be adding/removing elements from the DOM.
A more generic version of smerny's excellent answer with id's can be made by slightly altering two lines:
$input.attr("ID", "loadNum"); becomes $input.attr("ID", $(this).attr("ID")); -- this way, it simply takes the current id, and keeps it, whatever it is.
Similarly,
$span.attr("ID", "loadNum"); becomes $span.attr("ID", $(this).attr("ID"));
This simply allows the functions to be applied to any div. With two similar lines added, both id and class work fine. See example.
I have done little change in code, By using this input type cant be blank, it will back to its real value.
var switchToInput = function () {
var $input = $("<input>", {
val: $(this).text(),
type: "text",
rel : jQuery(this).text(),
});
$input.addClass("loadNum");
$(this).replaceWith($input);
$input.on("blur", switchToSpan);
$input.select();
};
var switchToSpan = function () {
if(jQuery(this).val()){
var $text = jQuery(this).val();
} else {
var $text = jQuery(this).attr('rel');
}
var $span = $("<span>", {
text: $text,
});
$span.addClass("loadNum");
$(this).replaceWith($span);
$span.on("click", switchToInput);
}
$(".loadNum").on("click", switchToInput);
jsFiddle:- https://jsfiddle.net/svsp3wqL/
var check = function(){
return false;
}
var submit = document.createElement("input");
submit.type = "image";
submit.src = "submit1.gif";
submit.onclick = check;
_submitSpan.appendChild(submit);
i created a form and append a input button, but i found it can't work in IE6, when click the button, the form auto submitted. can anybody help me.thank you.
Instead of explicitly setting the onclick attribute, try binding dynamically to the nodes' onclick event instead. Or perhaps you should be looking at the onsubmit event of the form.
function bindEvent(target, event, handler) {
if (typeof target.addEventListener != 'undefined') {
target.addEventListener(event, handler, false);
} else if (typeof target.attachEvent != 'undefined') {
target.attachEvent('on' + event, handler);
}
}
function check(e) {
// Cancel W3 DOM events
if (typeof e.preventDefault != 'undefined') {
e.preventDefault();
}
// Cancel for old IE event model
e.returnValue = false;
return false;
}
var submit = document.createElement("input");
submit.type = "image";
submit.src = "submit1.gif";
_submitSpan.appendChild(submit);
// Bind click event to submit button...
bindEvent(submit, 'click', check);
// ...or perhaps you want to bind submit event to form
bindEvent(submit.form, 'submit', check);
It might be an idea to hook into a 3rd party lib to handle event inconsistencies et al, YUI does a fine job, as does jquery.
For IE you might have to use the addAttribute method instead of .onclick()
submit.addAttribute('onclick', check);
From W3C HTML 4.01 Specs:
image
Creates a graphical submit button. The value of the src attribute specifies the URI of the >image that will decorate the button. For accessibility reasons, authors should provide >alternate text for the image via the alt attribute.
Do not use an <input type="image"> like a checkbox. The best way to make an image-checkbox is something like:
<label for="input">
<input id="input" style="display:none;" type="checkbox">
<img src="img.gif" alt="Check">
</label>
The label will treat the image as a checkbox, and automatically check the hidden checkbox if the image is clicked.