If i have to enter any value in that text box and press tab button. text box will remove and value should be display. like this way $('#txt').val();
Please help me how to do?
Add a comment
|
3 Answers
Shooting from the hip here. Is this what you are looking for?
$('input[type="text"]').blur(function() {
$(this).hide().after($('<span>').text($(this).val()));
});
$('input[type="text"]').keydown(function (e) {
if (e.keyCode == 9) {
$(this).hide().after($('<span>').text($(this).val()));
}
});
Comments
<div>
<input type='text' id='txt'>
</div>
//If you don't require a tab push
$('#txt').live('blur'){
var value = $(this).val();
if(value){
$(this).parent().html(value);
}
}
//If you want tab only
$('#textbox').live('keydown', function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 9) {
e.preventDefault();
var value = $(this).val();
if(value){
$(this).parent().html(value);
}
}
});
As others have stated, if you can't change your HTML markup to conform above...
$('#txt').blur(function(){
$(this).hide().after($(this).val());
});
5 Comments
SeanCannon
That's a dangerous one. If he has multiple form fields in the same container, they'll all be deleted by your solution :)
espradley
Hens why I showed the div structure...there should be a div wrapping it to make it that much easier.... Planning your HTML sometimes is just as important as your jQuery code.
SeanCannon
Your solution forces the OP to abide by your DOM is all I'm saying. You have no idea what his form looks like, so you can't really assume he's able to change the entire structure.
espradley
True, but maybe he doesn't have an issue with it either... I like your way too...but there's more than one way to fry a fish. My brain went immediately to this method cause I have a few recent scripts that I can click to create a form element, then change, then blur and it saves automatically... And thanks for the mark down...shows you have a good sense of community effort! ;) Night.
espradley
HEHE, it's not stealing if I contribute it to the response of others (and you suggested it as a format change on my post)... And I probably should have referenced the other guys answer since it actually considers the tab key press... Anyways, I got better things to do than argue with you... See you around..
Try this:
$('#txt').blur(function(){
$(this).hide().after($(this).val());
});
Working example: http://jsfiddle.net/AlienWebguy/Jdf5m/1/
