Use JS to dynamically change the input type attribute

This article mainly introduces the relevant information about Javascript dynamically changing the input type attribute, and attaches a simple example code. Friends in need can refer to it

Javascript dynamically changes the input type attribute:

Code implementation:

<script type="text/javascript">
  function shoppw(thebox){
    var ps = document.getElementById(&#39;ps&#39;);
    var pass = document.getElementById(&#39;pass&#39;);
    ps.removeChild(pass);
    var psImput = document.createElement("INPUT");
    
    if(pass.type == &#39;password&#39;){
      psImput.type = "text";
    } else {
      psImput.type = &#39;password&#39;;
    }
    psImput.id = &#39;pass&#39;;
    psImput.name = "password";
    psImput.maxlength="15";
    ps.appendChild(psImput);
  }
</script>

HTML code:

<td class="label"> * <label for="password" accesskey="">登录密码：</label></td>
  <td ><p id="ps"><input type="text" name="password" maxlength="15" id="pass" /></p>
   <input name="checkbox2" type="checkbox" value="true" checked="checked" id="show" onclick="shoppw(this)" />
   <label for="show" accesskey="">显示</label></td>

You can dynamically change the type attribute value of the input element at runtime

Above I compiled it for everyone. I hope it will be helpful to everyone in the future.

Related articles:

JS uses event delegation to add events to elements

Tips for using new() in JS

Summary and solution of common JS errors

The above is the detailed content of Use JS to dynamically change the input type attribute. For more information, please follow other related articles on the PHP Chinese website!