首页input中如何使用点击切换功能

input中如何使用点击切换功能

时间: 2023-12-01 08:03:39 浏览: 33

您可以使用`<input>`标签的`type`属性来实现点击切换功能。具体来说，当`type`属性的值为`text`时，输入框将会显示为文本；而当`type`属性的值为`password`时，输入框则会显示为密码点。下面是一个简单的示例，它演示了如何使用`<input>`标签的`type`属性实现点击切换功能： ```html <!DOCTYPE html> <html> <head> <title>Toggle Input Type Example</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <div> <label for="password">Password:</label> <input type="password" id="password" name="password"> <button id="toggle">Show</button> </div> <script> $(function() { $('#toggle').click(function() { var input = $('#password'); if (input.prop('type') === 'password') { input.prop('type', 'text'); $(this).text('Hide'); } else { input.prop('type', 'password'); $(this).text('Show'); } }); }); </script> </body> </html> ``` 在上面的代码中，我们首先创建了一个包含标签、输入框和按钮的`<div>`元素。然后，我们使用jQuery选择器`$('#toggle')`选中了按钮，并使用`click()`方法为其绑定了一个点击事件。在点击事件的处理函数中，我们首先获取了输入框的jQuery对象`$('#password')`，并使用`prop()`方法获取了输入框的`type`属性。接下来，我们判断输入框的`type`属性是否为`password`，如果是，则将其设置为`text`，同时将按钮的文本设置为`Hide`；否则，将其设置为`password`，同时将按钮的文本设置为`Show`。当用户单击按钮时，输入框的类型将会在“password”和“text”之间切换，并且按钮的文本也会随之改变。