JavaScript removeAttribute("readonly") 不工作

Question

所以我是 JavaScript 的新手，我想做的是从某些文本输入字段中删除只读属性。我的代码正在运行，但正在发生的事情是删除 readonly 大约 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

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

JavaScript removeAttribute("readonly") 不工作

JavaScript removeAttribute("readonly") not working

html

javascript

dom

function

readonly