javascript - 仅在焦点上显示输入中的最后 3 个字符？

Question

我有包含小时和分钟的输入，但我只希望在输入集中时显示分钟。这可能吗？

我目前的方法是使用 jQuery 添加完整时间，但理想的做法是将完整时间作为整个时间的值，并只显示必要的内容。

因此，光标不会在您单击输入的位置结束(光标显示在最后。至少在 FF 中)。

其他更聪明的想法？不可能只用 css 做吧？未聚焦时将最后 3 个字符的颜色设置为透明或类似。

$('input').on('focus', function(e) {
  var full_time = $(this).attr('data-full-time');
  $(this).val(full_time);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" data-full-time="12:30" data-short-time="12" value="12" />

Answer 1

要使光标位于正确的位置，您可以使用伪造的表单域。这主要是 CSS，只有 JS 来同步字段。 (根据您的示例，我假设您的意思是您只想显示小时，而不仅仅是分钟。)

$('#real').on('input', function(e) {
  $('#fake').val($(this).val().split(':')[0]);
});

.input-container {
  position: relative;
}

.input-container input {
  position: absolute;
}

#fake {
  pointer-events: none;
}

#real {
  opacity: 0;
}

#real:focus {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="input-container">
  <input id="fake" type="text" value="12" />
  <input id="real" type="text" value="12:30" />
 </div>