复制文本时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的输入标记中实现此功能（没有JS）？

http://jsfiddle.net/r3g6nhsa/

请纠正我的英语。

Answer 1

据我所知，它只能用 JS 来实现，但是你可以尝试这个 - JSFiddle。

超文本标记语言

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