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

Question

这是我尝试完成的:我需要一个包含带有单位的值的输入字段，它看起来像这样:

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

我可以想到两种方法:1.将input域替换为失去焦点时看起来和input一模一样的div，并将input的值设置为它的内容:

$('#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) 创建一个helper元素，并通过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>