I have an input field, by click value become * when I lose my focus field become clean. How to add additional * to input by every single click?
$('body').append("<input type='text' />");
$('input').click(function() {
$(this).val('*');
});
$('input').mouseleave(function() {
$(this).val('');
});
You are replacing the value of the input field. You want to append to it. Change $(this).val('*'); to $(this).val($(this).val() + '*'));
Your mouseleave() function call is what's making the field blank. If for every click you want to add an asterisk:
$('input').click(function() {
$(this).val('*' + $(this).val());
})
Use a variable outside the functions to store the *
$('body').append("<input type='text' />");
var inputVal="";
$('input').click(function() {
inputVal +="*";
$(this).val(inputVal);
})
$('input').mouseleave(function() {
$(this).val('');
})
Related
I want to get the input value while I keep pressing keyboard keys.
Following updates the input if I click out of the input field.
$('create-text').onchange = function() {
console.log("whoo: " + this.value);
}
The .change event triggers when the value has been changed and the element loses focus, as in click outside of the element.
When releasing a pressed key:
$('create-text').keyup(function() {
console.log("whoo: " + this.value);
});
When pressing a released key and wanting to record modifier and not-printing keys:
$('create-text').keydown(function() {
console.log("whoo: " + this.value);
});
When pressing a released key and not needing the above:
$('create-text').keypress(function() {
console.log("whoo: " + this.value);
});
However, you would probably want to use a proper selector .create-text or #create-text to target your input element. You could also get more specific by using something like input[name="cr-text"]#create-text.
// On pressing key
$("input").keyup(function(){
console.log($(this).val())
});
// When focus lost
$("input").focusout(function(){
console.log($(this).val())
});
I am adding input fields on keystroke, by using an example from the answer for this question. This is my example. I was trying in various ways to remove field if user deletes content from it, so that there are always fields that have some content and one last empty field for adding more, but I just can't find a solution.
This is the code:
$(document.body).on("input", ".external-media-input:last", function () {
var inputID = (parseInt($(this).attr('id')) + 1);
$(".input_fields_wrap").append('<div><input class="external-media-input" id="' + inputID + '" name="external_media[]" type="text"/></div>');
});
You can use on('blur') or .on('focusout')
//...
.on('blur', ".external-media-input:not(:last)", function () {
if(!$(this).val()) $(this).remove();
});
JSFiddle
You can use also on('keyup')
$(document.body).on("keyup", ".external-media-input", function(){
if($(this).val() == '')
$(this).remove();
});
here is your fiddle: https://jsfiddle.net/bembvptx/2/
In your style add one more event:
$(document.body).on("input", ".external-media-input", function () {
if (!$(this).val())
{
$(this).remove();
}
});
I currently have a selection of buttons and on click of a button I want to add the text from the button into a text-box. Every time I click on the button I want to be able to append on to whatever I have in the input field.
What I currently have
$('#js-AddFilterOpenBracket').click(function () {
$('#js-FilterString').val($(this).text());
});
What I'm Aiming for
$('#js-AddFilterOpenBracket').click(function () {
$(this).text().appendTo($('#js-FilterString'));
});
No need to use appendTo as it should be used for elements. Rather, manually append to the current value then set it
$('#js-AddFilterOpenBracket').click(function () {
var currentVal = $('#js-FilterString').val();
var newVal = currentVal + $(this).text();
$('#js-FilterString').val(newVal);
});
May not be the bast way but you could do this
$('#js-AddFilterOpenBracket').click(function () {
$('#js-FilterString').val($('#js-FilterString').val() + $(this).text());
});
I've got the following code in my web page, where I need to click on the input field and add values using the number pad provided! I use a script to clear the default values from the input when the focus comes to it, but I'm unable to add the values by clicking on the number pad since when I click on an element the focus comes from the input to the clicked number element. How can I resolve this issue. I tried the following code, but it doesn't show the number in the input.
var lastFocus;
$("#test").click(function(e) {
// do whatever you want here
e.preventDefault();
e.stopPropagation();
$("#results").append(e.html());
if (lastFocus) {
$("#results").append("setting focus back<br>");
setTimeout(function() {lastFocus.focus()}, 1);
}
return(false);
});
$("textarea").blur(function() {
lastFocus = this;
$("#results").append("textarea lost focus<br>");
});
Thank you.
The first thing I notice is your selector for the number buttons is wrong
$('num-button').click(function(e){
Your buttons have a class of num-button so you need a dot before the class name in the selector:
$('.num-button').click(function(e){
Secondly, your fiddle was never setting lastFocus so be sure to add this:
$('input').focus(function() {
lastFocus = this;
...
Thirdly, you add/remove the watermark when entering the field, but ot when trying to add numbers to it (that would result in "Watermark-text123" if you clicked 1, then 2 then 3).
So, encalpsulate your functionality in a function:
function addOrRemoveWatermark(elem)
{
if($(elem).val() == $(elem).data('default_val') || !$(elem).data('default_val')) {
$(elem).data('default_val', $(elem).val());
$(elem).val('');
}
}
And call that both when entering the cell, and when clicking the numbers:
$('input').focus(function() {
lastFocus = this;
addOrRemoveWatermark(this);
});
and:
$('.num-button').click(function(e){
e.preventDefault();
e.stopPropagation();
addOrRemoveWatermark(lastFocus);
$(lastFocus).val($(lastFocus).val() + $(this).children('span').html());
});
You'll see another change above - you dont want to use append when appends an element, you want to just concatenate the string with the value of the button clicked.
Here's a working branch of your code: http://jsfiddle.net/Zrhze/
This should work:
var default_val = '';
$('input').focus(function() {
lastFocus = $(this);
if($(this).val() == $(this).data('default_val') || !$(this).data('default_val')) {
$(this).data('default_val', $(this).val());
$(this).val('');
}
});
$('input').blur(function() {
if ($(this).val() == '') $(this).val($(this).data('default_val'));
});
var lastFocus;
$('.num-button').click(function(e){
e.preventDefault();
e.stopPropagation();
var text = $(e.target).text();
if (!isNaN(parseInt(text))) {
lastFocus.val(lastFocus.val() + text);
}
});
Live demo
Add the following function:
$('.num-button').live( 'click', 'span', function() {
$currObj.focus();
$currObj.val( $currObj.val() + $(this).text().trim() );
});
Also, add the following variable to global scope:
$currObj = '';
Here is the working link: http://jsfiddle.net/pN3eT/7/
EDIT
Based on comment, you wouldn't be needing the var lastFocus and subsequent code.
The updated fiddle lies here http://jsfiddle.net/pN3eT/28/
I am building a dynamic small lenght converter that contains 3 input[text]s. Like so
<input type='text' class='bx' id='cm'> Centimeter<br>
<input type='text' class='bx' id='m'> Meter<br>
<input type='text' class='bx' id='km'> Kilometer<br>
The effect is the following: if you click on "Meter" the value becomes '' and if you type a value the "Centimeter" and "Kilometer" value will be equal to a value(...).
Example
The jquery is like so:
$(function() {
var selected = ????;
// do i need something here to empty the input it is focused on?
$("#cm").val(selected * 545);
$("#km").val(selected * 545);
$("#m").val(selected * 453);
})
I want the var selected to be equal to the value of the text input it is focused on.
How can i do this?
The calculation in examples are informative.
You can use jQuery focus to get selected input field.
$(function() {
$("input.bx").focus({
var selected =parseInt(this.value, 10);
this.value = ''; //this line will remove text from selected input.
$("#cm").val(selected * 545);
$("#km").val(selected * 545);
$("#m").val(selected * 453);
});
})
var selected = $(this).val();
// // The code you have written will only work fro the first time your page loads. If you want it to work on every click of it you need to handle the focus event of the input..
$('#cm , #km , #m').on('focus', function() {
var selected = parseInt($(this).val() , 10) ; // Will convert to a Int
$("#cm").val(selected * 545);
$("#km").val(selected * 545);
$("#m").val(selected * 453);
});
But I think a blur event makes more sense here instead of a focus event..
FIDDLE
Which will point to the value of the selected input
You have to implement a listener that listens for the focus event.
check this out:
http://api.jquery.com/focus/
$('.bx').focus(function() {
var id = $(this).attr("id");
if (id === "cm") {
alert('Handler for .focus() called cm');
}
else if (id === "m") {
alert('Handler for .focus() called m');
}
else if (id === "km") {
alert('Handler for .focus() called km');
}
});
You need an event handler, in this case for the focus event:
$(function() {
$(".bx").focus(function(e) {
var selectedval = this.value,
selectedtype = this.id;
…
});
});