javascript - 如何使用 div 单击事件更新输入

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

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

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

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

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

其次，您的 fiddle 从未设置lastFocus，因此请务必添加以下内容:

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

第三，您可以在输入字段时添加/删除水印，但不要在尝试向其中添加数字时添加/删除水印(如果您依次单击 1、2、3，则会生成“Watermark-text123”)。

因此，将您的功能封装在函数中:

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/