StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h2>Styling the field to contain symbols</h2> <p>When it comes to including the symbols within this <code>number</code> field, you can use some walkaround like that:</p> <p>HTML:</p> <pre><code><span id="number-container"> <input type="number" name="number" id="number-field" value="500" /> <span id="number-container-symbol">$</span> </span> </code></pre> <p>CSS:</p> <pre><code>#number-container { position: relative; } #number-container-symbol { left: 5pt; position: absolute; top: 0px; } #number-field { background-color: transparent; padding-left: 10pt; } </code></pre> <p>Treat it as a proof of concept. See <a href="http://jsfiddle.net/xeTyA/" rel="noreferrer">this jsfiddle</a> for a live example. It looks like that in Chrome:</p> <p><img src="https://i.stack.imgur.com/sdtXD.png" alt="enter image description here"></p> <h2>Defining smaller granularity</h2> <p>Based on <a href="http://dev.w3.org/html5/markup/input.number.html" rel="noreferrer">the documentation on number input (Editor's Draft)</a>, to <strong>define granularity</strong> you need to add <code>step="<some-floating-point-number>"</code> attribute to the <code><input></code> tag:</p> <pre><code><input type="number" name="number" value="500.01" step="0.01" /> </code></pre> <p>and it will work in many modern browsers. See <a href="http://jsfiddle.net/xeTyA/1/" rel="noreferrer">this jsfiddle</a> for tests.</p> <h2>Conclusion</h2> <p>You should be able to style it to contain symbols you need. There is also a feature that, according to documentation, enables support for floating-point numbers.</p> <h2>Alternative solution - empty field in front of something else</h2> <p>You can also <strong>trick someone into believing he is seeing content of the input field</strong>, but show him something else behind the field (this is some extension of my original solution). Then if someone taps the field, you can propagate proper value etc., then go back to the previous state on blur. See this code (<a href="http://jsfiddle.net/n8w7n/3/" rel="noreferrer">live example on jsfiddle</a> - blue color means you are looking at something that is not within the field):</p> <pre><code>// store original value from INPUT tag in jQuery's .data() var input_field = jQuery('#number-field'); var display_span = jQuery('#number-container-value'); var base_val = parseFloat(input_field.val()); input_field.data('storedVal', base_val); input_field.val(''); display_span.html(base_val); // react to field gaining and losing focus jQuery('#number-field').on('focus', function(event){ var el = jQuery(this); var display = jQuery('#number-container-value'); if (typeof el.data('storedVal') != 'undefined'){ el.val(el.data('storedVal')); }; display.html(''); }).on('blur', function(event){ var el = jQuery(this); var display = jQuery('#number-container-value'); var new_val = parseFloat(el.val()); el.data('storedVal', new_val); display.html(new_val); el.val(''); }); </code></pre> <p>(the full code with styling is on the mentioned jsfiddle). The code needs shortening & cleaning up, but it is a <strong>proof of concept</strong>. Try it and share your findings, please.</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