Question

我正在使用ReactJS构建登录页面。我正在使用内部构建的自定义文本组件，但不幸的是，它没有密码屏蔽选项。将<input>标记与type=password一起使用不是一种选择。如何使用Javascript/JQuery使我的密码字段显示为蒙版（Dots而非文字）？

读取每个keydown事件并将字符替换为一个点，同时将字符存储在列表中或某些行中的某些内容是否是一个可行的选项？

Answer 1

嗯，实现这一目标的方法要么是在你的JSX / HTML中，要么是在CSS中。

要使用JSX或HTML实现此目的，您可以使用：

<input type="password" name="password">

要使用CSS实现此目的，您可以使用：

-webkit-text-security: disc;
-moz-text-security: disc;
text-security: disc;

Answer 2

您正在寻找<input type="password">，这正是如此。

Answer 3

我只需调节输入类型。

<input type={show_input?'text':'password'} 
       name='password' 
       id='password'
       value={user.password}
       onChange={handleChange}
 />

在onChange函数中更改show_input的值，或添加一个将shouw_input更改为true或false的按钮。

当类型为password时，它将被屏蔽；当为文本时，它将被取消屏蔽。

屏蔽ReactJS中的密码输入

3 个答案: