Question

我的网页上有以下code，我需要点击输入字段并使用提供的数字键盘添加值！当焦点到达时，我使用脚本清除输入中的默认值，但是我无法通过单击数字键盘来添加值，因为当我单击一个元素时焦点来自点击的输入数字元素。我该如何解决这个问题。我尝试了以下代码，但它没有显示输入中的数字。

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>");
});

谢谢。

Answer 1

这应该有效：

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

Answer 2

我注意到的第一件事是数字按钮的选择器是错误的

$('num-button').click(function(e){

您的按钮的类为num-button，因此您需要在选择器中的类名前加一个点：

$('.num-button').click(function(e){

其次，你的小提琴从未设置lastFocus所以请务必添加：

$('input').focus(function() {
    lastFocus = this;
    ...

第三，在输入字段时添加/删除水印，但在尝试向其添加数字时（如果单击1，则为“Watermark-text123”，然后是2，则为3）。

因此，将您的功能包含在函数中：

function addOrRemoveWatermark(elem)
{
    if($(elem).val() == $(elem).data('default_val') || !$(elem).data('default_val')) {
        $(elem).data('default_val', $(elem).val());
        $(elem).val('');
    }
}

在进入单元格时以及单击数字时都会调用它：

$('input').focus(function() {
        lastFocus = this;
        addOrRemoveWatermark(this);
});

和

$('.num-button').click(function(e){
    e.preventDefault();
    e.stopPropagation();
    addOrRemoveWatermark(lastFocus);
    $(lastFocus).val($(lastFocus).val() + $(this).children('span').html());
});

您会看到上面的其他更改 - 您在添加元素时不想使用append，您只想将字符串与点击的按钮的值连接起来。

以下是您的代码的工作分支：http://jsfiddle.net/Zrhze/

Answer 3

添加以下功能：

$('.num-button').live( 'click', 'span', function() {
    $currObj.focus();
    $currObj.val( $currObj.val() + $(this).text().trim() );
});

另外，将以下变量添加到全局范围：

$currObj = '';

以下是工作链接：http://jsfiddle.net/pN3eT/7/

修改

根据评论，您不需要var lastFocus及后续代码。

更新的小提琴在这里http://jsfiddle.net/pN3eT/28/

如何使用div click事件更新输入

3 个答案:

修改