3

如果可能的话，我想使用一个输入框，我可以输入“1”到“200”并在应用时打开与它对应的链接。同一站点和文件夹结构中的所有链接和输入。这将比有限的分页更有利，并且对移动设备更友好。

要打开的完整 url 示例为：http ://example.com/test-1

  1. 目前我有一个类似的结构，页面以“-1”到“-112”结尾
  2. 允许预先确定以下部分：“ http://example.com/test- ”
  3. 因此，当在输入字段中输入任何数字时，它会将自身添加到上面列出的预定值中。仅在字段中输入“1”或任何其他数字时。

希望与 iOS 和最流行的浏览器兼容。非常感谢您的帮助，因为我已经尝试了十几种其他导航方法，我觉得这将是最好的方法。我可以做输入的 css 和样式，但我正在寻找一种轻量级的方法来处理这个查询。

4

2 回答 2

1

这个解决方案对我有用。顺便说一句，我喜欢基于键盘输入的界面，因为它们确实是最快的导航方式，但奇怪的是，在人们总是按按钮的这些日子里，它们并不流行，所以我也赞成你的问题。

我在代码中编写的一些重要功能是，此 JavaScript 导航无需用户在其移动设备的键盘上按“Go”，同时还确保用户有时间继续输入，如果他们打算输入两位或三位数字。

<input type="text" onkeyup="
 if (self.going) clearTimeout(self.going);
 var x = this.value.replace(/\D+/g, '');
 if (!x) return;
 self.going = setTimeout(function() {
    var url = 'http://example.com/test-' + x;
 /* alert(url); */
    location.href = url;
 }, 1000);
" placeholder="Enter 1-112!" />

自定义选项： 通过更改1000为不同的值，您可以自定义导航开始前的轻微暂停（有在用户完成输入之前过早离开页面的风险）。

于 2013-06-20T00:33:22.300 回答
0

这很简单：

<input type='text' placeholder='Enter a number' id='number' />  
<input type='button' value='Go' id="go" />

<p>Please enter a number above.</p>

jQuery/JS：

$('#go').on('click', function(event) {
  var num = $('#number').val();
  if (num == "") return;
  var url = "http://example.com/test-" + num;
  window.location.href = url;
});

示例 http://codepen.io/hamstu/pen/shdjv

于 2013-06-20T00:39:58.670 回答