我如何使表单动作传递输入文本到一个函数

Question

我的问题是。我正在使用维基百科的API制作一个WikiViewer。我有一个搜索框(输入类型文本)，我希望能够在查询中键入，只需点击"enter"，让它返回我的结果，而不是有一个实际的提交按钮。它需要是一个实际的形式bc，否则移动设备将无法只是击中返回/去/等，而不是按下一个按钮。我尝试使用"enter"按键事件，但我在移动设备上找不到类似的东西，我敢肯定它们根本不存在。

下面是我的工作代码，没有表单元素。

<div class='container'>
	<input type="text" name="search" placeholder="Search..." id='search'>
	<input type='submit' value=''>
	<div id='article'>
	</div>
</div>

const ready = () => {
	const getWiki = (text) => {
		$.ajax({
			type: "GET",
			url: "http://en.wikipedia.org/w/api.php?action=parse&format=json&prop=text&section=0&page=" + `${text}` + "&callback=?",
			contentType: "application/json; charset=utf-8",
			async: false,
			dataType: "json",
			success: (data, textStatus, jqXHR) => {
				const markup = data.parse.text["*"];
				const text = $('<div></div>').html(markup);
				text.find('a').each(function() {
					$(this).replaceWith($(this).html())
				});
				text.find('sup').remove();
				text.find('.mw-ext-cite-error').remove();
				$('#article').html($(text).find('p'));
			},
			error: error => {}
		});
	};
	$('#search').on('keypress', (e) => {
		if (e.which === 13)
			getWiki($('#search').val())
	});
	
};
$(document).ready(ready);

如果有人知道一个更简单的方法来完成这一点，而不需要移动设备的表单，我洗耳恭听。一如既往，任何帮助都将不胜感激。谢谢!

Answer 1

你不需要提交按钮。我说的是创建一个表单，以便使用它的默认行为从表单中获取提交:

var $searchForm = $('#search_form');
$searchForm.on('submit', function (e) {
  e.preventDefault();
  var searchField = e.target.search.value;
  alert(searchField);
  //use your searchField to pass to the function
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
    <form id="search_form">
	<input type="search" name="search" placeholder="Search..." id='search'>
    </form>
	<div id='article'>
	</div>
</div>