我正在编码一个HTML电子邮件模板,为我们的用户提供一个临时密码登录到他们的帐户。但是,我正在尝试去掉通常添加到HTML电子邮件元素中的尾随空格,这样,如果用户选择该行,他们可以只复制密码,而不需要额外的字符。
我尝试使用div元素来包装密码,因为这样可以去掉空格,但如果用户单击并拖动以进行选择(而不是双击),仍会选择一个额外的空格,如下所示:
代码如下:
...
<tr>
<td align="center">
<div>myTempPassword</div>
</td>
</tr>
....
要重现此问题,请确保不是双击div,而是在行首前单击并将鼠标拖到最右边。现在,不仅包含文本的div被选中,而且它后面还有一些额外的空格。
我尝试的第二个解决方案是将密码文本转换为不可见的输入字段,这样当用户尝试选择它时,只有该输入字段中的文本被选中。我还将其设为只读,以确保用户不会尝试输入它。这在一开始运行得很好,除了在Android Mail这样的电子邮件客户端上,密码区显示一个闪烁的光标,因为客户端软件试图将其视为输入栏。
下面是实现该功能的代码:
...
<tr>
<td align="center">
<input readonly="readonly" class="pw-input" style="width: 270px; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 30px; color: #EA1675; border: none;"
type="text" value="myTempPassword" />
</td>
</tr>
....
为了解决这个问题,我尝试使用CSS设置光标属性,但大多数移动电子邮件客户端都不支持该属性。
有没有人对我有其他的建议:
1)去掉输入字段中闪烁的光标,不使用cursor CSS属性...
或
2)当用户单击并拖动以选择?时,使用另一种方法删除密码的尾随空格?
谢谢!
https://stackoverflow.com/questions/50825366
复制相似问题