How can I update a input using a div click event

Question

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.

Jamiec · Accepted Answer · 2013-04-24 12:00:34Z

1

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/

answered Apr 24, 2013 at 12:00

Jamiec

136k15 gold badges143 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Imesh Chandrasiri Over a year ago

This was a good answer! :) But there is a simple issue! even when I click on a NaN element, it adds the value! can you suggest me a way to prevent this! Thank you!

Jamiec Over a year ago

@DimalChandrasiri - What is a "NaN element"?

Imesh Chandrasiri Over a year ago

The "DONE" Element & "DEL" element! :)

Jamiec Over a year ago

@DimalChandrasiri - ah, I see. Easy, just give them a different class and handle them differently!

Minko Gechev · Accepted Answer · 2013-04-24 11:56:06Z

1

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

answered Apr 24, 2013 at 11:56

Minko Gechev

25.8k9 gold badges64 silver badges69 bronze badges

Comments

hjpotter92 · Accepted Answer · 2013-04-24 12:11:01Z

1

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/

edited Apr 24, 2013 at 12:11

answered Apr 24, 2013 at 12:00

hjpotter92

81.1k36 gold badges148 silver badges188 bronze badges

1 Comment

Robin Leboeuf Over a year ago

You missed something on the append method when clicking a number, you forgot to change lastFocus to your new variable $currObj, the last focused input is not keeped :)

Collectives™ on Stack Overflow

How can I update a input using a div click event

3 Answers 3

4 Comments

Comments

EDIT

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

EDIT

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related