时间戳

首页 > 解决方案 > 使用 addEventListener() 方法从表单重定向页面

javascript - 使用 addEventListener() 方法从表单重定向页面

问题描述

我正在尝试从表单中获取输入值以将用户重定向到新页面。环境在 Sharepoint Online 中。

我不能使用 HTML 事件（即 onclick 或 onkeypress），这就是我决定使用事件侦听器的原因。

我已经在本地测试了代码并且知道它可以处理上述事件，但我被要求删除它们以防止 XSS 类型的攻击。

我尝试使用事件侦听器，但似乎无法让它按照我想要的方式工作。

HTML 代码：

<form method="get" action="" class="search-container">
      <input id="search-input" type="text" placeholder="Search...">
      <a class="material-icons" id="search-submit" >search</a>
</form>

JS代码：

document.getElementById('search-input').addEventListener('keypress', searchKeyPress)

function searchKeyPress(e) {
  e = e || window.event;
  if (e.keyCode === 13)
  {
      document.getElementById('search-submit').click();
      //alert('Enter Pressed')
      return false;
  }
  return true;
}

document.getElementById('search-submit').addEventListener('click', redirect)

// redirect function
function redirect() {
  //look for search id
  var item = document.getElementById("search-input").value;

  // alert(item)

  //redirect page
  alert('Search Icon Clicked')
  window.location.href = "https://domain.sharepoint.com/sites/Intranet/_layouts/15/osssearchresults.aspx?u=https%3A%2F%domain%2Esharepoint%2Ecom%2Fsites%2FIntranet&k=" + item + "&ql=1036";

}

我希望能够重定向到 中的页面 window.location.href，但页面会刷新。

任何帮助，将不胜感激。

标签： javascriptonclickaddeventlistenerdom-eventsonkeypress

解决方案

找到了解决方案！

事实证明，事件侦听器被解释为 null。为了解决这个问题，我确保它在窗口加载之后加载。

添加密钥也很有用e.preventDefault();。Enter

见下文：

// Make sure code loads after window loads
window.onload = function(){
    var input = document.getElementById('search-input')
    input.addEventListener('keypress', searchKeyPress);

    var submit = document.getElementById('search-submit')
    submit.addEventListener('click', redirect);
};

//Input Keypress function
function searchKeyPress(e) {
  // event.preventDefault();
  e = e || window.event;

  if (e.keyCode === 13)
  {
    e.preventDefault();
    document.getElementById('search-submit').click();
    //alert('Enter Pressed');
    return false;
  }
  return true;
}

// redirect function
function redirect() {
  //look for search id
  var item = document.getElementById("search-input").value;

  // alert(item)

  //redirect page
  alert('Search Icon Clicked')
  window.location.href = "https://domain.sharepoint.com/sites/Intranet/_layouts/15/osssearchresults.aspx?u=https%3A%2F%domain%2Esharepoint%2Ecom%2Fsites%2FIntranet&k=" + item + "&ql=1036";

}

推荐阅读