在输入数字类型时仅在焦点上显示文本

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> 

（另请参阅此jsFiddle ）

问题是（如您在上面的屏幕快照中所见），chrome根据您的本地设置，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> 

也看到这个jsFiddle

我可以使用input [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>