仅在焦点上显示类型编号输入中的文本

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会自动将小数点转换为逗号（在输入中，但不在假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]来完成这个，但我不想放弃[数字]类型（最小/最大/步骤验证，屏幕键盘等）的好处。

有没有办法解决我的两个想法的缺陷？或者这是一种更优雅的方式吗？

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>