jQuery inline edit return key - javascript

I've got a working inline edit script which lets the user edit his or her name.
But it currently does not "save" when the user hits the enter key
The script:
<span class="pageTitle" id="username">Visitor 123123981203980912 <span class="iconb" data-icon=""></span></span>
// Inline edit
$.fn.inlineEdit = function(replaceWith, connectWith) {
$(this).hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
$(this).click(function() {
var elem = $(this);
elem.hide();
elem.after(replaceWith);
replaceWith.focus();
replaceWith.blur(function() {
if ($(this).val() != "") {
connectWith.val($(this).val()).change();
elem.html($(this).val() + ' <span class="iconb" data-icon=""></span>');
}
$(this).remove();
elem.show();
});
});
};
var replaceWith = $('<input name="temp" type="text" class="inlineEdit" />'),
connectWith = $('input[name="hiddenField"]');
$('#username').inlineEdit(replaceWith, connectWith);
How can i make the above also react when the enter key is hit?

You need to detect the enter press and do the same thing in blur function. Add the following to your js. Demo
replaceWith.keypress(function(e) {
if(e.which == 13) {
if ($(this).val() != "") {
connectWith.val($(this).val()).change();
elem.html($(this).val() + ' <span class="iconb" data-icon=""></span>');
}
$(this).remove();
elem.show();
}
});

This should fire when the enter key is pressed inside the input:
$('#username').live("keypress", function(e) {
if (e.keyCode == 13) {
// action here
}
});

You can call the same function on keydown and check for e.keyCode for enter key which is 13..a fiddle would be helpful..
Also check this link
Thanks,
Hardik

Related

jQuery or javascript prevent event from input keypress

CODE:
var appender = $('<input class="form-control" placeholder="Search" id="search_made" type="text">')
appender.find('#search_made').on('keypress', function(e) {
e.preventDefault()
console.log('keypress!')
if (e.keyCode == 13 && !e.shiftKey) {
console.log('not shift enter')
var passed_value = $(this).val()
if (passed_value === '') {
console.log('nothing was passed on input tag')
return false;
}
console.log('passed value: ' + passed_value)
}
})
$('body').append(appender)
I want to add input tag dynamically by jQuery.
Using those code, I can only add input tag seemingly but other functions that has to be bound was not bound well.
So when I type some words on input tag and click enter key, It refreshes page but does not execute any console.log() lines.
How can I fix it to make it do other bound functions(include console.log()) well?
Change the selector from:
appender.find('#search_made').on('keypress', function(e) {
To
$(document).on('keypress','#search_made', function(e) {
OR: Simply
appender.on('keypress', function(e) {
Working Code Example:
var appender = $('<input class="form-control" placeholder="Search" id="search_made" type="text">')
$(document).on('keypress','#search_made', function(e) {
e.preventDefault()
console.log('keypress!')
if (e.keyCode == 13 && !e.shiftKey) {
console.log('not shift enter')
var passed_value = $(this).val()
if (passed_value === '') {
console.log('nothing was passed on input tag')
return false;
}
console.log('passed value: ' + passed_value)
}
})
$('body').append(appender)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Edit HTML text on click

I would like to change text to input text by clicking on it :
Currently I've:
<div class="wrapper">
<span class="text-content">Double Click On Me!</span>
</div>
And in javascript:
//plugin to make any element text editable
$.fn.extend({
editable: function () {
$(this).each(function () {
var $el = $(this),
$edittextbox = $('<input type="text"></input>').css('min-width', $el.width()),
submitChanges = function () {
if ($edittextbox.val() !== '') {
$el.html($edittextbox.val());
$el.show();
$el.trigger('editsubmit', [$el.html()]);
$(document).unbind('click', submitChanges);
$edittextbox.detach();
}
},
tempVal;
$edittextbox.click(function (event) {
event.stopPropagation();
});
$el.dblclick(function (e) {
tempVal = $el.html();
$edittextbox.val(tempVal).insertBefore(this)
.bind('keypress', function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) {
submitChanges();
}
}).select();
$el.hide();
$(document).click(submitChanges);
});
});
return this;
}
});
//implement plugin
$('.text-content').editable().on('editsubmit', function (event, val) {
console.log('text changed to ' + val);
});
But I don't know how to change double click on simple click ! I've tried to replace $el.dblclick(...) by $el.click(), but it doesn't work.
Is anybody have a solution ?
When you just change $el.dblclick to $el.click it will also handled with $(document).click(submitChanges); event. So $el.click handler should return false to stop further event processing.
$el.click(function (e) { // <---------- click
tempVal = $el.html();
$edittextbox.val(tempVal).insertBefore(this).bind('keypress', function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) {
submitChanges();
}
}).select();
$el.hide();
$(document).click(submitChanges);
return false; // <------------------------ stop further event handling
});
http://jsfiddle.net/zvm8a7cr/
You may use the contenteditable attribute of html
var initialContent = $('.text-content').html();
$('.text-content')
.on('blur', function(){
if(initialContent != $(this).html())
alert($(this).text());
if($(this).html() == ''){
$(this).html(initialContent);
}
})
.on('click', function(){
if(initialContent == $(this).html()) {
$(this).html('');
}
});;
.text-content {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper">
<span contenteditable="true" class="text-content">Click On Me!</span>
</div>

Search without submit button with jquery

I need to add class to the input element in Opencart search(in header.tpl)
HTML CODE:
<input type="text" name="search" id="input-search" class=""/>
JQUERY CODE:
<script type="text/javascript">
$(document).ready(function() {
$("#input-search").keyup(function (e) {
if (e.keyCode == 13) {
$("#input-search").addClass("button-search");
}
});
});
</script>
I am using Opencart and to redirect to the search page you have to have the class .button-search. I don't want to have a submit button.
When I add some text to the input and then when I press Enter the script should add class to the input and redirect to the Opencart search page.
Here is what you want buddy.
code: http://jsfiddle.net/webcarvers/xdt7g/1/
preview: http://jsfiddle.net/webcarvers/xdt7g/1/embedded/result/
HTML
JS
$("#inputSearch").on('keypress',function (e) {
if (e.keyCode == 13) {
$("#inputSearch").addClass("buttonSearch");
$("p").text("Class added = " + $("#inputSearch").attr("class"));
window.location.replace("http://www.yahoo.com/")
}
});
When the button is inside a form you can submit it:
<script type="text/javascript">
$(document).ready(function() {
$("#input-search").keyup(function (e) {
if (e.keyCode == 13) {
$("#input-search").addClass("button-search");
$(this).closest('form').submit();
}
});
});
</script>
You need to use event delegation method like below:
$('body').on('keyup','#input-search', function (e) {
if (e.keyCode == 13) {
$(this).addClass("button-search");
}
});
If all you want to do is redirect to a page with the value from the input you can do the following window.location.href = "?search=" + this.value;
Your code will be like:
<script type="text/javascript">
$(document).ready(function() {
$("#input-search").keyup(function (e) {
var kc = e.keyCode || e.which;
if (kc == 13) {
$("#input-search").addClass("button-search");
window.location.href = "?search=" + this.value;
}
});
});
</script>
you can change to this:
<script type="text/javascript">
$(document).ready(function() {
$("#input-search").keyup(function (e) {
var kc = e.keyCode || e.which;
if (kc == 13) {
$(this).addClass("button-search");// get the current context with 'this'
window.location.href = "../yoursearchpageurl?" + $(this).serialize();
}
});
});
</script>
As you mentioned that you don't have a form in your page so when you add the class to your button then just after that you can change your page url as suggested with $(this).serialize()

JQuery Check if input is empty not checking onload?

I am using this code to check if an inputbox is empty or not and it works fine but it only checks check a key is press not when the page loads.
It's does what it should but I also want it to check the status when the page loads.
Here is the current code:
$('#myID').on('keyup keydown keypress change paste', function() {
if ($(this).val() == '') {
$('#status').removeClass('required_ok').addClass('ok');
} else {
$('#status').addClass('required_ok').removeClass('not_ok');
}
});
Try the following:
$(function() {
var element = $('#myID');
var toggleClasses = function() {
if (element.val() == '') {
$('#status').removeClass('required_ok').addClass('ok');
} else {
$('#status').addClass('required_ok').removeClass('not_ok');
}
};
element.on('keyup keydown keypress change paste', function() {
toggleClasses(); // Still toggles the classes on any of the above events
});
toggleClasses(); // and also on document ready
});
The simplest way to do is trigger any of the keyup,keydown etc event on page load. It will then automatically call your specific handler
$(document).ready(function(){
$("#myID").trigger('keyup');
});
try checking the value on a doc ready:
$(function() {
if ($('#myID').val() == '') {
$('#status').removeClass('required_ok').addClass('ok');
} else {
$('#status').addClass('required_ok').removeClass('not_ok');
}
});
EDIT: just as an update to this answer, a nicer approach might be to use toggle class, set up in doc ready then trigger the event to run on page load.
function check() {
var $status = $('#status');
if ($(this).val()) {
$status.toggleClass('required_ok').toggleClass('ok');
} else {
$status.toggleClass('required_ok').toggleClass('not_ok');
}
}
$(function () {
$('#myID').on('keyup keydown keypress change paste', check);
$('#myID').trigger('change');
});
Well then why dont just check the field after the page is loaded?
$(document).ready(function(){
if ($('#myID').val() == '') {
$('#status').removeClass('required_ok').addClass('ok');
} else {
$('#status').addClass('required_ok').removeClass('not_ok');
}
});
$(document).ready(function(){
var checkVal = $("myID").val();
if(checkVal==''){
$('#status').removeClass('required_ok').addClass('ok');
}
else{
$('#status').addClass('required_ok').removeClass('not_ok');
}
});

How to disable Enter/Return Key After a function is executed because of it?

I have this function where #text_comment is the ID of a textarea:
$('#text_comment').live('keypress',function (e) {
if(e.keyCode == 13) {
textbox = $(this);
text_value = $(textbox).val();
if(text_value.length > 0) {
$(this).prev().append('<div id="user_commenst">'+text_value+'</div>');
$(textbox).val("");
}
}
});
What is happening is the text is appending when the enter/return key is hit (keyCode 13), but it is also moving the text a line down, as the enter/return key is supposed to.
This is occurring even though I set the value of the textbox to "".
How about event.preventDefault()
Try and stop your event propagation (See http://snipplr.com/view/19684/stop-event-propagations/) when entering the if(e.keyCode == 13) case.
try this one event.stopImmediatePropagation()
$('#text_comment').live('keypress',function (e) {
if(e.keyCode == 13) {
e.stopImmediatePropagation()
///rest of your code
}
});
I've tested this out, this works. The enter does not create a new line.
$('#text_comment').live('keypress',function (e) {
if(e.keyCode == 13) {
textbox = $(this);
text_value = $(textbox).val();
if(text_value.length > 0) {
$(this).prev().append('<div id="user_commenst">'+text_value+'</div>');
$(textbox).val("");
}
return false;
}
});
Although I am wondering, if you don't want to ever have a new line, why are you using a textarea, why not use a input type='text' instead ?
Answer here http://jsfiddle.net/Z9KMb/

Categories

Resources