在输入双击时隐藏透明文本答案

【问题标题】：hide a transparent text on input double click在输入双击时隐藏透明文本
【发布时间】：2017-07-18 17:33:04
【问题描述】：

我不希望用户看到输入中的文本，我已经使用了color: transparent 并且文本是隐藏的，但是当用户双击输入时，文本变得可见！通过双击选择输入时如何隐藏它。提前致谢。

#loginCard{
  color: transparent;
}

<!DOCTYPE html>
<html>
<head></head>
<body>
    <input type="text" autocomplete="off" id="loginCard">
</body>
</html>

【问题讨论】：

使用输入类型=password
将代码添加到您的问题中。

标签： javascript jquery html css

【解决方案1】：

在 CSS 中使用此代码更改文本标记突出显示颜色

注意：您也可以在颜色中使用transparent。我使用白色，因为背景是白色的。但是使用transparent 会更明智。

::selection {
  background: #ffb7b7; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #ffb7b7; /* Gecko Browsers */
}

::selection {
  background: #fff; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #fff; /* Gecko Browsers */
}

.sample {
  color: #fff;
}

&lt;input type="text" class="sample" /&gt;

【讨论】：

【解决方案2】：

简单添加

::selection {
  background: transparent;
}

对于火狐：

::-moz-selection {
  background: transparent;
}

【讨论】：

【解决方案3】：

我不知道你为什么要这样做，但你可以使用 css：

input, textarea { 
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
 -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently
                              supported by Chrome and Opera */

}

【讨论】：

【解决方案4】：

input::selection {
    color: transparent;
    background: transparent;
}

会让它变得透明

【讨论】：

【解决方案5】：

您可以将::selection 设置为transparent

Support

input {
  color: transparent;
}

input::selection {
 color: transparent;
}

&lt;input&gt;

【讨论】：

【解决方案6】：

HTML

<input type="password" id="password" >

jQuery

$(document).ready(function(){

    $('#password').dblclick(function(){
     $('#password').attr("type","text");
    })

});

【讨论】：