JavaScript removeAttribute（“只读”）不起作用[重复]

Question

所以我是 JavaScript 新手，我想做的是从某些文本输入字段中删除只读属性。 我的代码正在运行，但是正在发生的事情是只读删除了 1 秒，然后又返回只读状态。下图将解释我想说的（因为我的英语很糟糕） enter image description here

这是我的代码：

    <form name="editForm" method="post" class="edit">
  <script>
  function ro(i) {
    document.getElementById(i).focus();
    document.getElementById(i).select();
    document.getElementById(i).removeAttribute("readonly");
  }
</script>
  <p>First Name:</p>
  <input id="i1" type="text" name="fname" readonly> <button onclick="ro('i1')"> Edit </button>
  <p>Last Name:</p>
  <input id="i2" type="text" name="lname" readonly> <button onclick="ro('i2')"> Edit </button>
  <p>Username:</p>
  <input id="i3" type="text" name="username" readonly> <button onclick="ro('i3')"> Edit </button>
  <p>Password:</p>
  <input id="i4" type="password" name="password" readonly> <button id="e4" > Edit </button><br>
  <!--<input type="password" name="cpassword" placeholder="Confirm Password" required>-->
  <input type="submit" name="signup" value="Sign Up">
</form>

Answer 1

那些按钮实际上刷新了页面，所以只读的又回来了。 将type='button' 添加到按钮。