Customizing Input field to open a numeric link

Question

If possible i would like to use an input box that i could type "1" to "200" and open the link corresponding to it when applied. All links and input within the same site and folder structure. This would be more favorable than a limited pagination, as well as more mobile friendly.

Full url example to be opened would be: http://example.com/test-1

1. Currently I have a similar structure with pages that end in "-1" to "-112"
2. Allowing the following portion pre-determined: "http://example.com/test-"
3. So that when any number is typed into the input field it would add itself to the pre-determined value listed above. When only "1" or any other number is entered into the field.

Hopefully with compatibility with iOS and most popular browsers. Many Thanks for any help, as i have tried over a dozen other navigation methods, and i feel this would be the best approach. I can do the css and styling of the input, but i'm looking for a light weight approach to handling this query.

Answer 1

This solution works for me. By the way, I like keyboard-input-based interfaces since they are truly the fastest way of navigation yet strangely are not popular in these days of dumbing down people to always push buttons, so I also am voting up your question.

Some features that are important and which I programmed into the code are that this JavaScript navigates without the user needing to push "Go" on their mobile device's keyboard, while also making sure that the user has time to keep typing if they are intending to type a two- or three-digit number.

<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!" />

Customization options: By changing 1000 to a different value, you can customize the slight pause before navigation begins (at risk of prematurely leaving the page before the user has finished typing).