StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I made this little snippet to achieve what you want and I've tested it on iPhone 5 v7.0.3</p> <p>I used <code>e.which</code> to read <code>CharCode</code> entered and then push it into an array (<em>before</em>) which represents digits before decimal mark and another array (<em>after</em>) to move values from (<em>before</em>) array past the decimal mark.</p> <p>It might look complicated, due to my humble programming skills.</p> <blockquote> <p><strong>1) <a href="http://jsfiddle.net/Palestinian/wD293/" rel="noreferrer">Code demo</a></strong> - <strong>2) <a href="http://jsfiddle.net/Palestinian/YDCTr/" rel="noreferrer">Currency conversion demo</a></strong></p> </blockquote> <h2>HTML:</h2> <pre><code><input type="tel" id="number" /> </code></pre> <h2>JS</h2> <h3>Variables and functions:</h3> <pre><code>// declare variables var i = 0, before = [], after = [], value = [], number = ''; // reset all values function resetVal() { i = 0; before = []; after = []; value = []; number = ''; $("#number").val(""); $(".amount").html(""); } // add thousand separater function addComma(num) { return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } </code></pre> <h3>Main code:</h3> <pre><code>// listen to keyup event $("#number").on("keyup", function (e, v) { // accept numbers only (0-9) if ((e.which >= 48) && (e.which <= 57)) { // convert CharCode into a number number = String.fromCharCode(e.which); // hide value in input $(this).val(""); // main array which holds all numbers value.push(number); // array of numbers before decimal mark before.push(value[i]); // move numbers past decimal mark if (i > 1) { after.push(value[i - 2]); before.splice(0, 1); } // final value var val_final = after.join("") + "." + before.join(""); // show value separated by comma(s) $(this).val(addComma(val_final)); // update counter i++; // for demo $(".amount").html(" " + $(this).val()); } else { // reset values resetVal(); } }); </code></pre> <h3>Reset:</h3> <pre><code>// clear arrays once clear btn is pressed $(".ui-input-text .ui-input-clear").on("click", function () { resetVal(); }); </code></pre> <h3>Result:</h3> <p><img src="https://i.stack.imgur.com/eCZ3f.png" alt="enter image description here"></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload