jQuery分页转到输入值更改的页面

Question

我为我的网站创建了一些分页，并希望使用input-element在页面之间导航。

如以下示例所示：

输入需要＆＃34; return＆＃34;要触发脚本以触发的键。

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

可以使用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

Answer 1

您可以使用 get 表单和html5执行此操作，而无需使用javascript：

<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;
    }
});​

Answer 2

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

Answer 3

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

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

我会尝试为不支持HTML5的浏览器添加一些jQuery验证，但它在IE8中有效，所以我很满意。