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>

Answer 2

只需具有.focus和blur选项，并使用一次（“ 12:30”），但在.blur（）选项中-将其拆分为“：”并仅显示第一部分。

尝试重点关注领域，以了解实际情况。

$('input').on('focus', function(e) {
  var time = $(this).attr('data-time');
  $(this).val(time);
});

$('input').on('blur', function(e) {
  var time = $(this).attr('data-time').split(":")[0];
  $(this).val(time);
});

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

Answer 3

HTML：

<input id="timeInput" value="12:30" onfocus="showMinutesOnly()" onblur="showWholeTime()"/>

和一些JavaScript：

var wholeTimeString;
var minutes;

function showMinutesOnly(){
  wholeTimeString = document.getElementById("timeInput").value;
  minutes = wholeTimeString.substring(wholeTimeString.indexOf(":")+1);

  document.getElementById("timeInput").value = minutes;
}

function showWholeTime(){
  document.getElementById("timeInput").value = wholeTimeString;
}

示例：http://jsbin.com/rumaveguwe/1/edit?html,js,console,output

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

3 个答案: