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

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

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

var-lastFocus；
$（“#测试”）。单击（函数（e）{
//在这里你想干什么就干什么
e、 预防默认值（）；
e、 停止传播（）；
$（“#结果”）.append（e.html（））；
如果（最后焦点）{
$（“#结果”）。追加（“将焦点设置回
”；
setTimeout（函数（）{lastFocus.focus（）}，1）；
}
返回（假）；
});
$（“textarea”）.blur（函数（）{
lastFocus=这个；
$（“#结果”）.append（“textarea失去焦点
”；
});

谢谢。

这应该可以：

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

这应该可以：

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

---

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

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

您的按钮有一个

num button

类，因此在选择器中的类名前需要一个点：

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

其次，您的小提琴从未设置过

lastFocus

，因此请务必添加以下内容：

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

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

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

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

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

并在进入单元格和单击数字时调用：

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

以及：

您将看到上面的另一个更改-您不想在追加元素时使用

append

，只想将字符串与单击的按钮的值连接起来

---

下面是代码的一个有效分支：

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

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

您的按钮有一个

num button

类，因此在选择器中的类名前需要一个点：

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

其次，您的小提琴从未设置过

lastFocus

，因此请务必添加以下内容：

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

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

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

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

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

并在进入单元格和单击数字时调用：

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

以及：

您将看到上面的另一个更改-您不想在追加元素时使用

append

，只想将字符串与单击的按钮的值连接起来

---

下面是代码的一个工作分支：

添加以下函数：

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

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

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

$currObj = '';

以下是工作链接：

编辑 根据注释，您不需要var

lastFocus

和后续代码

---

更新的小提琴位于此处

添加以下功能：

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

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

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

$currObj = '';

以下是工作链接：

编辑 根据注释，您不需要var

lastFocus

和后续代码

---

更新的fiddle位于此处

当您单击数字时，在append方法上遗漏了一些内容，您忘记将lastFocus更改为新变量$currObj，最后一个聚焦的输入未保留：）当您单击数字时，在append方法上遗漏了一些内容，您忘记将lastFocus更改为新变量$currObj，最后一个重点输入未保留：）这是一个很好的答案！：）但有一个简单的问题！即使我点击一个NaN元素，它也会增加值！你能给我建议一个预防的方法吗！谢谢大家!@什么是“NaN元素”？“DONE”元素和“DEL”元素！：）@迪马尔坎德拉西里-啊，我明白了。简单，只要给他们一个不同的类和处理他们不同！这是一个很好的答案！：）但有一个简单的问题！即使我点击一个NaN元素，它也会增加值！你能给我建议一个预防的方法吗！谢谢大家!@什么是“NaN元素”？“DONE”元素和“DEL”元素！：）@迪马尔坎德拉西里-啊，我明白了。简单，只要给他们一个不同的类和处理他们不同！