javascript - 从文本框中单击后，jQuery onblur 不显示值

Question

出于某种原因，我不明白为什么我无法让 onblur 属性工作。我希望发生的情况是，如果有人单击文本框并且没有输入任何内容，我希望显示 TBD，但如果他们确实输入了一个值，则显示该值。我也有一个输入掩码处于事件状态。我似乎无法弄清楚这一点，我也不知道为什么。我觉得我错过了一些非常小的事情，它就在我的脑海中。这是我的脚本的代码。

jQuery(function($) {
    $.mask.definitions['~'] = '[+-]';
    $('.run').mask('99:99');
    $('.run').val('TBD');
    $('.penalty').mask('99:99');
    $('.penalty').val('TBD');
    $('.com').val('TBD');

})

var defaultValues = {
    'dfb_run': "TBD"
};

$('input').live('blur', function() {
    var x = $(this);
    var run = x.attr('id');

    if (x.val().match(/^[\s\.]*$/)) {

        if (run == 'dfb_run') {
            x.unmask();
        }
        x.val(defaultValues[dfb_run]);
    }
});

这是我体内的东西

<table>
   <tr>
      <td> Site:
          <input type = "text" value = "DFB" readonly = "true" size = "4"> </td>
      <td> Run Time:
          <input type = "text" size = "5" id = "dfb_run" class = "run" name = "dfb_run" value = "TBD"> </td>
      <td> Penalty:
          <input type = "text" class = "penalty" size = "5" id = "dfb_pen" name = "dfb_pen"> </td>
      <td> Completed Time:
          <input type = "text" readonly = "true" size = "5" id = "dfb_com" name = "dfb_com" class = "com"> </td>
      <td>
          <input type = "button" value = "calculate" onclick = dfbcalc() id = "dfbcalcu">
      </td>
   </tr>
</table>

我使用这个 jsfiddle 作为引用，因为它与我正在寻找的效果相同。 http://jsfiddle.net/RuFHK/16/

Answer 1

在html中，您正在为输入标签设置value属性，并且on模糊您将获得来自 input 的值并检查它是否为空。

由于您已经为输入分配了一个值，因此它永远不会为空，并且不会跳过此 if 条件

if (x.val().match(/^[\s\.]*$/))

因为输入标签默认有一个值。

我猜你需要用 placeholder 替换 value 属性，这样输入就没有默认值，当用户将其留空时，它将通过if 条件在您的代码中。

希望这有帮助。

更新了 JSFiddle http://jsfiddle.net/RuFHK/18/使用 placeholder 而不是 value 属性。