Question

这似乎是一个常见的问题，但我找不到解决方案。

现在我有了

＆＃13;

var my_setter = function(key, value) {
  $('#' + key).val(value);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Some float number
<input id="key1" class="number2digit" type="text">
</label>

＆＃13;

假设我有value = 3.14159265359。我想要：

通常只显示2位数（3.14），右对齐
将鼠标悬停在＆＃34;标题＆＃34;：3.14159265359
编辑时：精确值：3.14159265359左对齐。

在CSS或jQuery或其他一些知名的JS库中有没有简短的方法，而不需要我用很多事件监听器来实现它？

Answer 1

尝试这样的事情：

$(function() {
  var defaultText = '';
  $('#key1').focus(function() {
    $(this).val(defaultText);
  });
  $('#key1').blur(function() {
    defaultText = $(this).val();
    $(this).val(parseFloat(defaultText).toFixed(2));
  });
  $('label[for=key1]').mouseenter(function() {
    console.log(defaultText);
  });
});

#key1 {
  text-align: right;
}

#key1:focus {
   text-align: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="key1">Some float number</label>
<input id="key1" class="number2digit" type="text">

注意： 在标签上查看我的更改。

<label for="key1">Some float number</label>
<input id="key1" class="number2digit" type="text">

vs你的：

<label>Some float number
<input id="key1" class="number2digit" type="text">
</label>

根据您的要求，您也可以。

如果您只想在标签的鼠标悬停上显示值，请使用我的版本。

如果您想在标签上显示价值或输入鼠标悬停，请继续使用您的版本，但您需要在javascript活动中更改内容。

将选择器$('label[for=key1]')更改为$('#key1').closest('label')。

对于值的对齐，您可以使用css focus：

#key1 {
  text-align: right;
}

#key1:focus {
   text-align: left;
}

我希望这会有所帮助。

编辑： 更好的是，您可以使用它。您只需要两个事件 - focus和blur，因为您只需要工具提示，title attr作为标签，在这种情况下，您可以使用任一标签格式。当然，您可能正在做除显示标题之外的其他内容，然后您可以使用上一个代码段。

$(function() {
  var defaultText = '';
  $('#key1').focus(function() {
    $(this).val(defaultText);
  });
  $('#key1').blur(function() {
    defaultText = $(this).val();
    var fVal = parseFloat(defaultText)
    if (fVal) {
      $(this).val(fVal.toFixed(2));
      $('#key1').closest('label').attr('title', defaultText);
    }
  });
});

#key1 {
  text-align: right;
}

#key1:focus {
  text-align: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Some float number
    <input id="key1" class="number2digit" type="text">
</label>

HTML，Javascript：在表单视图中仅显示几个数字，但在编辑时显示所有数字

1 个答案: