CODEWITHSUNDEEP
htmlcssinput
hovado
hovado

Reputation: 4948

HTML Ignore whitespace when copy text

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.

Upvotes: 8

Views: 4198

Answers (3)

Cheslab
Cheslab

Reputation: 1924

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.

Upvotes: 5

G-Cyrillus
G-Cyrillus

Reputation: 105883

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

Upvotes: 1

John Halbert
John Halbert

Reputation: 1350

Place &nbsp; in the value attribute between the characters you want separated by a space.

Upvotes: -3

Related Questions