变形 <INPUT> 在HTML5中
[英]Morphing <INPUT> in HTML5
问题描述
I have an input box 
我有一个输入框
<input style="width: 570px;" id="storagememory" min="0" max="9999" type="text">
At first it might look odd, having a min and max in there. 起初它可能看起来很奇怪，在那里有一个最小值和最大值。 But you see, I have the following Javascript that changes it thus: 但是你看，我有以下Javascript改变它：
document.getElementById('storagememory').addEventListener('blur', function()
{document.getElementById('storagememory').setAttribute('type','text');
document.getElementById('storagememory').value = document.getElementById('storagememory').value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
});
document.getElementById('storagememory').addEventListener('focus', function()
{document.getElementById('storagememory').value = document.getElementById('storagememory').value.toString().replace(/\D/g,'');
document.getElementById('storagememory').setAttribute('type','number');
});
So when the input is being focused on, it becomes an input/number. 因此，当聚焦输入时，它将成为输入/数字。 This is so the min and max values are respected, and I get the UI up/down (both as buttons and as up/down keystrokes). 这样就可以得到最小值和最大值，并且我可以上/下（包括按钮和向上/向下键击）。 When the focus is lost, it becomes input/text so I can format it appropriately with comma separation on the thousands, millions, etc. 当焦点丢失时，它变成输入/文本，因此我可以使用数千，数百万等的逗号分隔来适当地格式化它。
The problem lies when the input is focused in on, I lose the capability (Firefox 30.0) to type numbers into it. 问题在于当输入集中在上面时，我失去了将数字输入其中的功能（Firefox 30.0）。
My question is, how do I regain the ability to type numbers into this field without losing the ability to display non-numeric data when it's not being focused on? 我的问题是，如何重新获得在此字段中键入数字的能力，而不会失去在不关注数字时显示非数字数据的能力？
The expected value of this field is an integer between 0 and 9999. The integer is to show the proper comma separation if the value is above 999. Decimals are not to be considered herein...as such I could very well put a parseInt() in the 'blur' to truncate any user-input that would generate a decimal point. 该字段的期望值是介于0和9999之间的整数。如果值大于999，则整数将显示正确的逗号分隔。此处不考虑小数...因此我可以很好地放置parseInt（ ）在'blur'中截断任何会产生小数点的用户输入。
Thank you for reading, and for any constructive suggestions you may have on this topic. 感谢您阅读，以及您对此主题的任何建设性建议。
2 个解决方案
解决方案1
0 2015-04-24 03:13:44
If you don't have to use <input> , you might have some success using a <div> with the contentEditable attribute set to true : 如果您不必使用<input> ，那么使用<div>并将contentEditable属性设置为true可能会取得一些成功：
<!DOCTYPE html>
<html>
<body>
<div style="height: 50px; width: 570px; border: 1px solid black;" id="storagememory" contentEditable="true"></div>
<script>
document.getElementById('storagememory').addEventListener('blur', function() {
document.getElementById('storagememory').setAttribute('type', 'text');
document.getElementById('storagememory').innerHTML =
document.getElementById('storagememory').innerHTML.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
});
document.getElementById('storagememory').addEventListener('focus', function() {
document.getElementById('storagememory').innerHTML =
document.getElementById('storagememory').innerHTML.toString().replace(/\D/g, '');
document.getElementById('storagememory').setAttribute('type', 'number');
});
</script>
</body>
</html>
Of course, you'll have to implement some logic for the max and min constraints. 当然，您必须为max和min约束实现一些逻辑。
解决方案2
0 2015-04-24 05:26:40
It seems that the issue comes from Firefox blurring the element when the type changes from text to number (probably it happens also from number to text , but it doesn't affect the element as it occurs on blur). 似乎问题来自Firefox模糊元素，当类型从text更改为number （可能它也发生在从number到text ，但它不会影响元素，因为它在模糊时发生）。
One possible solution for this would be to use a sentinel variable, so Firefox only blurs the element if the action that triggered the blur didn't come from the actions taken during the focus event. 一种可能的解决方案是使用sentinel变量，因此如果触发模糊的操作不是来自焦点事件期间采取的操作，则Firefox仅模糊元素。
How it would be done: 怎么做：
- Add one
data-attribute (eg:data-focus) to the element.向元素添加一个data-属性（例如：data-focus）。 It will be used to keep track of when the input was focused.它将用于跟踪输入的聚焦时间。 - When the
focusevent is triggered, set that attribute's value to 1.触发focus事件时，将该属性的值设置为1。 - When the
blurevent is triggered, check if the value of that attribute.触发blur事件时，请检查该属性的值。- If it is 0, the blur was just a regular event. 如果它为0，那么模糊只是一个常规事件。
- If it is 1, the blur was caused by the input type change -> refocus the element (as the type is already
number, it will not trigger theblurevent again)如果为1，则模糊是由输入类型更改引起的 - >重新聚焦元素（因为类型已经是number，它不会再次触发blur事件）
- If it is 0, the blur was just a regular event.
- At the end of the
focusevent, set the attribute's value to 0 to avoid getting stuck focusing the element.在focus事件结束时，将属性的值设置为0，以避免卡住聚焦元素。
The code would look like this (I hope you don't mind I simplified by using this instead of selecting the element each time, I think it makes the code a little bit more readable): 代码看起来像这样（我希望你不介意我通过使用this而不是每次都选择元素来简化，我认为它使代码更具可读性）：
document.getElementById("storagememory").addEventListener("blur", function() { if (this.dataset.focus == 0) { this.type = "text"; this.value = this.value.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, ","); } else { this.focus(); } }); document.getElementById("storagememory").addEventListener("focus", function() { this.dataset.focus = 1; this.value = this.value.toString().replace(/\\D/g,''); this.type = "number"; this.dataset.focus = 0; });
<input style="width: 570px;" id="storagememory" min="0" max="9999" type="number">
You can also see a working demo on this JSFiddle: http://jsfiddle.net/630gdcw4/4/ 您还可以在此JSFiddle上看到一个有效的演示： http ： //jsfiddle.net/630gdcw4/4/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.