Question

我有IBAN（例如CZ5220100000000123456789）并且为了更好的可读性，我想在每第四个字符后插入空格（CZ52 2010 0000 0001 2345 6789）。但网上银行只接受没有空格的IBAN，如果有人复制这个IBAN，他必须在粘贴之前删除这些空格。

在第一段我会这样解决：

<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>

但是在输入标记中是否可以实现这一点（没有JS）并不支持html？

http://jsfiddle.net/r3g6nhsa/

请纠正我的英语。

Answer 1

据我所知，只有JS可以实现，但你可以试试这个 - 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;
}

注意：我没有检查这是否适用于移动设备/触摸屏。我建议使用一些JS解决方案。如果用户更改输入中的文本 - 跨度中的文本将不会更改。

Answer 2

你最终可以使用背景和像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>

它使阅读更容易，并且易于复制/粘贴：）

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

输入版本:(请将em或rem值用于尺寸＆amp; for letter-spacing以适合字体大小）

.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

将 放在您想要用空格分隔的字符之间的value属性中。

HTML复制文本时忽略空格

3 个答案: