1

我正在为我的网站创建一些分页，并希望使用输入元素在页面之间导航。

像下面的例子：

分页示例

输入需要按下“return”键才能触发脚本。

如果输入的值不在范围内，则会触发警报。例如，如果有 32 页，“请输入 1 到 32 之间的值”

这可以通过检测页面范围内的值变化并重定向到该页面来使用 jQuery 或 javascript 来完成吗？

我正在尝试在 Getty Images 上创建相同的设备：

http://www.gettyimages.com.au/Search/Search.aspx?contractUrl=2&language=en-US&family=creative&p=ball&assetType=image&clarification=ball%3A60847

4

3 回答 3

3

您可以使用get表单和不带 javascript 的 html5 来执行此操作：

<form class="pageNumberForm" type="GET">
    <input type="number" name="page" class="pageNumber" min="1" max="6" value="1" />
</form>​​​​​​​​​​​​​​​​​​​​​​​​​

如果您使用的是 php，您可以填写最大页面和当前页面：

<form class="pageNumberForm" type="GET">
    <input type="number" name="page" class="pageNumber" min="1" max="[page maximum]" value="[current page]" />
</form>​

您可以添加 jquery validate 来验证不支持 html5 的浏览器的表单。

编辑1：

或者你可以添加这个 jquery 代码来做一些简单的验证，就像 getty 一样：

$('.pageNumberForm').submit(function() {
    var pageInput = $(this).children('.pageNumber').first();
    var pageInputValue = pageInput.val();

    if (pageInputValue < pageInput.attr('min') || pageInputValue > pageInput.attr('max') || !pageInputValue.match(/\d+/)) {
        alert('Please enter a value between ' + pageInput.attr('min') + ' and ' + pageInput.attr('max'));
        return false;
    }
});​
于 2012-11-01T11:19:47.530 回答
0

要通过“return”键运行页面更改脚本，您应该使用$('input').on('keypress')事件并检查event.which属性（“return”应该是“13”）。

于 2012-10-31T02:14:14.510 回答
0

我的网站是 ASP，我使用了以下代码，它现在可以工作了。

<form type="get" onchange="return false">
<input type="number" name="page" id="page" min="1" max="5" value="1" />

我会尝试为不支持 HTML5 的浏览器添加一些 jQuery 验证，但它适用于 IE8，所以我对此很满意。

于 2012-11-01T23:28:20.290 回答