HTML Ignore Spaces When Copying Text

Question

I have an IBAN (e.g. CZ5220100000000123456789) and for better readability I would like to insert spaces after every fourth character (CZ52 2010 0000 0001 2345 6459). But Internet banking only accepts IBANs without spaces, and if someone copies this IBAN, they must remove these spaces before inserting them.

In paragraph I would solve it as follows:

<style type="text/css"> span { margin-right: 0.5em } </style> <p><span>CZ52</span><span>2010</span><span>0000</span><span>0001</span><span>2345</span>6789</p> 

But is it possible to achieve this (without JS) inside an input tag that does not support html?

http://jsfiddle.net/r3g6nhsa/

Please correct my English.

Answer 1

As far as I know, this can only be achieved with JS, however you can try this - JSFiddle .

HTML

 <div class="iban"> <input type="text" value="CZ5220100000000123456789" /> <span>CZ52 2010 0000 0001 2345 6789</span> </div> 

CSS

 .iban { position: relative; } .iban span { position: absolute; margin-right: 0.5em; padding: 1em; } .iban:hover span { display: none; } .iban input { display: none; } .iban:hover input { display: inline; } input { position: absolute; padding: 1em; } .iban span, input { font-family: Tahoma; font-size: 12px; width: 200px; border: 1px solid gray; } 

Note. I have not tested if this works on mobile devices / touch screens. I recommend using some kind of JS solution. If the user changes the text in the input, the text in the range does not change.

Answer 2

Ultimately, you can use a background and a font family, such as a courier:

 .iban { letter-spacing: 1px;/* makes it easier to read for some of us */ font-family: courier;/* all letters/numbers have same width */ display: inline-block;/* keep them together */ background: linear-gradient(to left, lightgray 50%, transparent 50%) left yellow;/* draw some colors behind */ background-size: 33.33% /* cause we need it to repeat 3 times */ text-shadow: 0 0 1px black; /* increase thickness */ } 

 <span class="iban">CZ5220100000000123456789</span> 

This makes reading easier and easy to copy / paste :)

http://codepen.io/anon/pen/QbzLEy

input version: (please use em or rem values ​​for size & for letter spacing and font size)

 .iban { letter-spacing: 0.125em; width: 18em; font-family: courier; background: linear-gradient(to left, #ccc 50%, transparent 50%) right tomato; background-size: 33.33%; margin: 0 5px; padding: 0; font-size: 1em; border: none; } 

 <p>IBAN: <input class="iban" value="CZ5220100000000123456789" /></p> 

http://codepen.io/anon/pen/ZGVzyy

Answer 3

Put   in the value attribute between the characters you want to separate with a space.