HTML 复制文本时忽略空格

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>

但是有没有可能在不支持 html 的 input 标签中实现这个(没有 JS)？

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 解决方案。如果用户更改输入中的文本 - 跨度中的文本不会更改。