避免 link 在 Javascript 中重新加载页面

Question

我将此按钮放在 <a> 标签中（想将其保留在 a 标签中）。

<center><a href="javascript:changePassword()" type="button" id="box_button" class="pw-button">Change Password</a></center>

问题是，当我点击 Enter 时，密码被更改，不幸的是页面重新加载，这在用户体验方面会非常烦人。那么，我该如何解决这个问题？

编辑：

好吧，我想通了，问题不在于按钮，而在于输入。

这里是代码：

<div id="login-box-field"><input type="password"  id="new_password" placeholder="Password: " class="form-login myLink" title="Password"  maxlength="20">
  
</div>

嗯，有人说了一个Form，一个JS脚本。拜托，你能告诉我，怎么做吗？此处平台上的其他一些示例不起作用:(

Answer 1

您可以使用 jquery 阻止 a 的默认操作（如果您不想更改 html）：

    $("a").click(function(event){
     event.preventDefault();
    });

更新：如果点击密码输入结果是页面刷新，那么你需要编辑这个输入调用的函数，所以编辑那个函数为return false.

Answer 2

要防止重新加载页面，您可以在函数中使用 e.preventDefault()。

看看这个：https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

示例：我的 HTML:

<a href="https://google.com" class="myLink">Click me</a>

JS代码：

var myLink = document.querySelector('.myLink')
myLink.addEventListener('click', function(e) {
  e.preventDefault()
})

Answer 3

您需要用 event.preventDefault() 阻止 link 的默认操作。为了防止 link 做任何事情，你应该省略 href 属性或者给它一个 href 的 javascript:void(0) 或等效的 javascript:; 并使用 onClick 事件处理程序来执行逻辑。

<center><a href="javascript:;" onClick="changePassword(event)" type="button" id="box_button" class="pw-button">Change Password</a></center>
<script>
function changePassword(e){
e.preventDefault();
console.log("Changing password");
//other logic
}
</script>

Answer 4

把锚标签换成按钮，加上onclick()事件，然后调用修改密码方法就可以了！

<div>
<center><button onclick="changePassword()" id="box_button" class="pw-button">Change Password</button></center></div>
<script>
function changePassword() {
alert("your code goes here")
}</script>

fiddle is here

Answer 5

大家。

我找到了对我有用的解决方案：

<input class="tableInput" type="text" value="Table input" onkeypress="return tableInputKeyPress(event)" />

<script type="text/javascript">
function tableInputKeyPress(e){
  e=e||window.event;
  var key = e.keyCode;
  if(key==13) //Enter
  {
     //do you task here...
     return true; //return true to submit, false to do nothing
  }
}
</script>

再次感谢所有发布他的解决方案的人:)

避免 link 在 Javascript 中重新加载页面

Avoid a link to reload the page in Javascript

html

javascript

button

reload