Настройка поля ввода, чтобы открыть цифровую ссылку

Если возможно, я хотел бы использовать поле ввода, в котором я мог бы ввести «1» в «200» и открыть соответствующую ему ссылку при применении. Все ссылки и входные данные в пределах одной и той же структуры сайта и папок. Это было бы более выгодно, чем ограниченная разбивка на страницы, а также более мобильная.Настройка поля ввода, чтобы открыть цифровую ссылку

Полный пример URL будет открыт бы: http://example.com/test-1

В настоящее время я имею сходную структуру со страницами, которые заканчиваются на «-1» до «-112»
Учитывая следующую порцию предварительно определяется : «http://example.com/test-»
Так что, когда любое число вводится в поле ввода, оно добавляет себя к предварительно определенному значению, указанному выше. Когда в поле вводится только «1» или любое другое число.

Надеюсь, совместимость с iOS и наиболее популярными браузерами. Большое спасибо за любую помощь, так как я пробовал более десятка других методов навигации, и я считаю, что это лучший подход. Я могу сделать css и стиль ввода, но я ищу легкий подход к обработке этого запроса.

источник

2013-06-20 Kernel

Используйте выпадающий или использовать JavaScript, чтобы создать причудливую форму проверки и немедленное перенаправление – ProfileTwist

Это решение работает для меня. Кстати, мне нравятся интерфейсы на основе ввода-вывода на клавиатуре, поскольку они действительно самый быстрый способ навигации, но странно не популярны в эти дни, когда люди путают людей, чтобы всегда нажимать кнопки, поэтому я также голосую за ваш вопрос.

Некоторые функции, которые важны и которые я запрограммировал в коде, это то, что этот JavaScript перемещается без необходимости нажатия кнопки «Перейти» на клавиатуре своего мобильного устройства, а также убедиться, что у пользователя есть время, чтобы печатать, если они намереваются ввести двух- или трехзначное число.

<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-20 00:33:22

То, что мне нужно, Большое спасибо! – Kernel

@Кернель спасибо! Удачи на вашем сайте! –

Это довольно straighforward:

<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-20 00:39:58 hamstu

Настройка поля ввода, чтобы открыть цифровую ссылку

ответ

Смежные вопросы