CODEWITHSUNDEEP
javascriptjquery
Imesh Chandrasiri
Imesh Chandrasiri

Reputation: 5679

How can I update a input using a div click event

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.

Upvotes: 0

Views: 132

Answers (3)

hjpotter92
hjpotter92

Reputation: 80639

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/

Upvotes: 1

Jamiec
Jamiec

Reputation: 136104

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/

Upvotes: 1

Minko Gechev
Minko Gechev

Reputation: 25682

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

Upvotes: 1

Related Questions