Morphing <INPUT> in HTML5
I have an input field
<input style="width: 570px;" id="storagememory" min="0" max="9999" type="text">
At first it may seem strange, with a minimum and a max. But you see, I have the following Javascript that changes it this way:
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');
});
Therefore, when an input is focused, it becomes an input / number. Thus, the minimum and maximum values are respected, and I get the UI up / down (both in the form of buttons, and when I press the up / down keys). When the focus is lost, it becomes input / text, so I can format it accordingly with a comma divided by thousands, millions, etc.
The problem is that the input is focused, I lose the ability (Firefox 30.0) to enter numbers into it.
My question is: how to restore the ability to enter numbers in this field without losing the ability to display non-numeric data when they are not focused?
0 9999. , 999. ... a parseInt() "", , .
, .
<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>
, max min.
, , Firefox , text number (, number text, , ).
, Firefox , , , , .
:
data-(:data-focus). , , .focus, 1.blur, .- 0, .
- 1, → (
number,blur)
focus0, .
(, , , 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">JSFiddle: http://jsfiddle.net/630gdcw4/4/