HTML Ignore whitespace when copy text

Question

I have IBAN (e.g. CZ5220100000000123456789) and for better readability I would like to insert whitespace after every fourth character (CZ52 2010 0000 0001 2345 6789). But internet banking accepts only IBAN without whitespace and if someone copy this IBAN, he has to remove these whitespaces before pasting it.

In paragraph I would solve it like this:

<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 input tag that doesn't support html?

http://jsfiddle.net/r3g6nhsa/

Please, correct my english.

Answer 1

As far as I know it can be achieved only 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 didn't check if this works on mobile devices/touch screens. I recommend to use some JS solution. If user change text in the input - text in the span won't change.

Answer 2

You could eventually use background and a font-family like 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>

It makes it easier to read and easy to copy/paste :)

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

input version :(please, use em or rem values to size& for letter-spacing to fit to 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