javascript - 仅在焦点上显示数字类型输入中的文本

Question

这是我尝试完成的任务:我需要一个包含带有单位的值的输入字段，如下所示:

在聚焦输入时，我希望它将单位移动到右侧，如下所示:

我可以想到两种方法: 1. 将输入字段替换为与失去焦点时的输入一模一样的 Div，并将输入的值设置为其内容:

$('#fakeInput').bind('click', changeToRealInput);
  $('#realInput').bind('blur', changeToFakeInput);
  $('#realInput').trigger('blur');
  $('#unitAddon').html($('#realInput').attr('unit'));

  function changeToFakeInput() {
  	// hide actual input and show a div with its contents instead
    $('#fakeInput').show();
    $('#realInputContainer').hide();
    $('#fakeInput').html($('#realInput').val() + $('#realInput').attr('unit'));
  }

  function changeToRealInput() {
  	// hide fake-div and set the actual input active
    $('#fakeInput').hide();
    $('#realInputContainer').show();
    $('#realInput').focus();
  }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

div#container {
    display: flex; 
    background: #8aaac7;   
    padding: 10px;
    width: 200px;
}

div#unitAddon,
input#realInput,
div#fakeInput {
  font-family: sans-serif;
  font-size: 26px;
  padding: 5px;
  width: 100%;
  background-color: #FFFFFF;
  border: none;
  outline: none;
}
div#realInputContainer,
div#fakeInput {
    border: 2px solid #dadada;
}
div#realInputContainer {
    display: flex; 
}
div#unitAddon {
    width: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="container">
  <div id="fakeInput"></div>
  <div id="realInputContainer">
      <input type="number" unit="kg" id="realInput" value="3.3">
      <div id="unitAddon"></div>
  </div>
</div>

(另请参阅 this jsFiddle )

这里的问题是(如上面的屏幕截图所示)，根据您的本地设置，chrome 会自动将小数点转换为逗号(在输入中，但不在 fake-div 中)

我想到的另一种方法是:当焦点丢失时，设置输入字段的大小以匹配其内容，并通过这样做，拉出在数字后面显示单位的插件。 这里的问题是获取输入内容的大小(跨浏览器):

$('#realInput').bind('focus', changeToRealInput);
  $('#realInput').bind('blur', changeToFakeInput);
  $('#realInput').trigger('blur');
  $('#unitAddon').html($('#realInput').attr('unit'));

  function changeToFakeInput() {
    // here is the question: what width should it be?
    $('#realInput').css({'width' : '40%'});
  }

  function changeToRealInput() {
    $('#unitAddon').css({'width' : 'auto'});
    $('#realInput').css({'width' : '100%'});
  }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

div#container {
    display: flex; 
    background: #8aaac7;   
    padding: 10px;
    width: 300px;
}

div#unitAddon,
input#realInput{
  font-family: sans-serif;
  font-size: 26px;
  padding: 5px;
  width: 100%;
  border: none;
  outline: none;
}

div#realInputContainer {
    border: 2px solid #dadada;
    display: flex; 
    background-color: #FFFFFF;
}

div#realInputContainer.setAddonAway > div#unitAddon {
    width: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="container">
  <div id="realInputContainer" class="setAddonClose">
      <input type="number" unit="kg" id="realInput" value="3.3">
      <div id="unitAddon"></div>
  </div>
</div>

also see this jsFiddle

我可以通过输入[type=text]来完成此任务，但我不想失去type[number]的好处(最小/最大/步骤验证、屏幕键盘等)

有什么办法可以解决我的两个想法的缺陷吗？或者有更优雅的方法吗？

Answer 1

思路是:(1)让输入框覆盖整个容器； (2)创建一个辅助元素，并通过JS将其设置为与输入值相同的长度，并使其作为占位符不可见； (3) 应用一些在单元框周围移动的样式。

<强> codepen

$(document).ready(function() {
  $(".value").text($(".number").val());
  $(".unit").text($(".number").attr("unit"));

  $(".number").on("change keypress input", function() {
    $(".value").text($(".number").val());
  });
});

* {
  box-sizing: border-box;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.container {
  position: relative;
  display: flex;
  border: 4px solid teal;
  width: 200px;
}

.container > * {
  font-family: sans-serif;
  font-size: 20px;
}

.number {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
}

.value {
  visibility: hidden;
  max-width: 100%;
  overflow: hidden;
}

.unit {
  position: relative;
  flex: 1;
  pointer-events: none;
  background: white;
}

.number:focus ~ .value {
  flex: 1;
}

.number:focus ~ .unit {
  flex: 0;
}

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

<div class="container">
  <input class="number" type="number" value="1.23" unit="kg">
  <span class="value"></span>
  <span class="unit"></span>
</div>