JavaScript removeAttribute（“只读”）不工作

所以我是JavaScript新手，我尝试从一些文本输入字段中删除readonly属性。 我的代码正在工作，但正在发生的事情是，它删除了readonly大约1秒钟，然后又返回到readonly。下图将解释我想说的话（因为我的英语很糟糕）

这是我的代码：

    <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>

职能ro（i）{
document.getElementById（i.focus（）；
document.getElementById（i）.select（）；
document.getElementById（i）.removeAttribute（“只读”）；
}
名字：

编辑
姓氏：

编辑
用户名：

编辑
密码：

编辑

这些按钮实际上会刷新页面，因此只读返回。

---

在按钮上添加

type='button'

。

对我来说，它工作正常。