Question

如果可能，我想使用一个输入框，我可以键入＆＃34; 1＆＃34;至＆＃34; 200＆＃34;并在应用时打开与其对应的链接。所有链接和输入在同一站点和文件夹结构中。这比有限的分页更有利，也更适合移动设备。

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

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

Answer 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更改为其他值，您可以在导航开始之前自定义轻微的暂停（在用户完成输入之前有过早离开页面的风险）。

Answer 2

这非常简单：

<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

自定义输入字段以打开数字链接

2 个答案: