单击输入时图像标记 onclick 事件不起作用

Question

您好，感谢您的提前帮助！

我目前正在使用 SharePoint 2010。我有一个使用图像 onclick() 事件触发搜索的搜索框。当您单击图像图标时效果很好，但当您在文本框中单击一次输入时它根本不起作用。这是按钮的代码。

<div style="position:relative; top:-3px; ">
  <label for="Search"><b>SEARCH</b>
  </label>&nbsp;&nbsp;&nbsp;
  <label for="Content">
    <input id="Content" type="radio" name="radiou" value="URL" checked="checked" style="margin-bottom:5px" />Content</label>
  <label for="Employees">
    <input id="Employee" type="radio" name="radiou" value="URL" style="margin-bottom:5px" />Employee</label>
  <input id="search_txt" title="Enter search words" type="text" name="k" maxlength="80" size="25" />&nbsp;
  <img src="/Style Library/Images/Search_button.png" onclick="submitSearch()" alt="Search Button" style="margin:0px; position:relative; top:7px; width:30px;"></img>
</div>

这里是 javascript 激活按钮点击的代码。我希望在输入一个术语并单击 Enter 键后也能触发它。

< script type = "text/javascript"
language = "JavaScript" >
  // <![CDATA[  
  function submitSearch() {
    var radiovals = document.getElementsByName("radiou");
    var hostnameforsearch = window.location.hostname;
    if (radiovals[0].checked) {
      queryVal = $('#search_txt').val();
      var searchUrl = 'http://' + hostnameforsearch + '/search/results.aspx?k=' + queryVal + '&u=' + hostnameforsearch + '&cs=This Site';
      window.location = searchUrl;
      return false;
    } else {
      queryVal = $('#search_txt').val();
      window.open('http://search.URL.com/Pages/PeopleResults.aspx?k=' + queryVal);
    };

  }; // ]]>
< /script>

感谢大家的帮助！肯

Answer 1

使用javascript检测是否按下回车键然后提交

$(document).ready(function(){
$("#search_txt").on("keyup",function(e){
    var code = (e.keyCode ? e.keyCode : e.which);
     if(code == 13) { //Enter keycode
       submitSearch();
     }
    });
});

演示：https://jsfiddle.net/farhanbaloch/devevwwy/

Answer 2

使用 <form> 而不是 <div> 并将事件处理程序附加到表单上的 submit 事件。

Answer 3

很简单，您在输入中没有任何对 submitSearch 的引用。

<input id="Employee" type="radio" name="radiou" value="URL" style="margin-bottom:5px" onkeydown="keyPressed(event)"/>Employee</label>

然后在你的代码中

function keyPressed(e){
   if(e.which==13){
     submitSearch()
   }
}

Answer 4

这是对我有用的...

Javascript

function submitSearch() {
  var radiovals = document.getElementsByName("radiou");
  var hostnameforsearch = window.location.hostname;
  if (radiovals[0].checked) {
    queryVal = $('#search_txt').val();
    var searchUrl = 'http://' + hostnameforsearch + '/search/results.aspx?k=' + queryVal + '&u=' + hostnameforsearch + '&cs=This Site';
    window.location = searchUrl;
    return false;
  } else {
    queryVal = $('#search_txt').val();
    window.open('http://search.URL.com/Pages/PeopleResults.aspx?k=' + queryVal);
  };

};

$(document).ready(function() {
  $("#search_txt").on("keyup", function(e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code == 13) { //Enter keycode
      submitSearch();
    }
  });
});

缺少事件处理程序

<img src="/Style Library/Images/Search_button.png" onclick="submitSearch()" onkeydown="keyPressed(event)" alt="Search Button" style="margin-bottom:0px; width:30px;"></img>

单击输入时图像标记 onclick 事件不起作用

Image tag onclick event not working when you click enter

html

javascript

jquery

onclick

onclicklistener