javascript - 在文本框中按回车键打开链接

Question

我有一个脚本，它使用两个文本框在 keyup 上生成链接，如果用户在文本框 1(所有其他)中，并且在输入一些文本后他按下回车键，那么“所有猫链接 - sometext 1”生成的链接应该是单击，如果他在“Category main”文本框中并输入了一些文本，则他按回车键“Main Cat link - sometext 2”链接应该被单击

function allcat(e) {
  var myVar = jQuery('#allcat').val();
  jQuery("#anchor").html("<a target='_blank' href='http://www.example.com/page.php?search=" + myVar + "&order=DESC'>All cat Link - " + myVar + "</a>");
  return false;
}

function catMain(e) {
  var myVar = jQuery('#catMain').val();
  jQuery("#anchorMain").html("<a target='_blank' href='http://www.example.com/page.php?category=main&search=" + myVar + "&order=DESC'>Main Cat Link - " + myVar + "</a>");
  return false;
}

jQuery(document).keyup(function(event) {
  if (event.keyCode == 13) {
    jQuery("#anchorMain").trigger('click');     
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<h1>Generate Link</h1>
<table border="0">
  <tr>
    <td>All Others</td>
    <td>
      <input type="text" size="50" name="allcat" id="allcat" onkeyup="allcat()">
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Category main</td>
    <td>
      <input type="text" size="50" name="catMain" id="catMain" onkeyup="catMain()">
    </td>
  </tr>
</table>

<hr><br>

<span id="anchor">All Category</span><br><br><br>
<span id="anchorMain">Cat main</span>

Answer 1

给您一个解决方案 https://jsfiddle.net/L2n6esnc/

allcat = function(e) {
  var myVar = jQuery('#allcat').val();
  $("#anchor").html(`<a target='_blank' href='http://www.example.com/page.php?search=${myVar}&order=DESC'>All cat Link - ${myVar}</a>`);
  return false;
}

catMain = function(e) {
  var myVar = jQuery('#catMain').val();
  $("#anchorMain").html(`<a target='_blank' href='http://www.example.com/page.php?category=main&search=${myVar}&order=DESC'>Main Cat Link - ${myVar}</a>`);
  return false;
}

$('input[type="text"]').keyup(function(event) {
  if (event.keyCode == 13) {
    window.open($('#' + $(this).attr('appendTo') + ' a').attr('href'), '_blank')
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Generate Link</h1>
<table border="0">
  <tr>
    <td>All Others</td>
    <td>
      <input type="text" size="50" name="allcat" id="allcat" onkeyup="allcat()" appendTo="anchor">
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Category main</td>
    <td>
      <input type="text" size="50" name="catMain" id="catMain" onkeyup="catMain()" appendTo="anchorMain">
    </td>
  </tr>
</table>

<hr><br>

<span id="anchor">All Category</span><br><br><br>
<span id="anchorMain">Cat main</span>

我使用 ES6 backtick 和 ${} 来使用变量而不是双引号/单引号。

我没有触发 click 事件，而是使用了 window.open。

希望对您有所帮助。