Бегущая строка в текстовом поле INPUT
с изменяющимся текстом
Недавно мы рассмотрели простой пример бегущей строки в текстовом поле INPUT. Теперь давайте рассмотрим чуть более сложную версию скрипта подобной бегущей строки. Усложнение заключается в том, что бегущая строка будет изменять свой текст.
Пример подобной бегущей строки в текстовом поле с изменяющимся текстом расположен ниже:
Почему-то данный способ подсказок для заполнения текстовых полей не получил широкого распространения и далеко не на каждом сайте можно встретить подобный визуальный эффект, хотя подобным образом можно неплохо экономить место на подсказках для полей.
Чтобы получить подобную бегущую строку в текстовом поле INPUT с изменяющимся текстом, вставьте JavaScript код, приведенный ниже, в начало Вашей странички:
<script type="text/javascript">
var speed = 100;
var delay = 1000;
var timerID = null;
var Running = false;
var mess = new Array()
mess[0] = "Введите свой номер телефона";
mess[1] = "Пример: 8(999)999-99-99";
mess[2] = "Либо оставьте поле пустым";
var currentMessage = 0;
var offset = 0;
function stop() {
if (Running) clearTimeout(timerID);
Running = false;
}
function start() {
stop();
show();
}
function show() {
var text = mess[currentMessage];
if (offset < text.length) {
if (text.charAt(offset) == " ") offset++;
var partialMessage = text.substring(0, offset + 1);
document.example.mobile.value = partialMessage;
offset++;
timerID = setTimeout("show()", speed);
Running = true;
}
else {
offset = 0;
currentMessage++;
if (currentMessage == mess.length) currentMessage = 0;
timerID = setTimeout("show()", delay);
Running = true;
}
}
</script>В том месте Вашей странички, где Вы хотите выводить на экран текстовое поле INPUT, в котором будет присутствовать бегущая строка, вставьте следующий код:
<div align="center">
<form name="example">
<input type="text" size="25" name="mobile">
</form>
</div>Ну и в конце странички, для того чтобы запустить скрипт бегущей строки, необходимо вызвать прописанную ранее функцию start():
<script type="text/javascript">
start();
</script>Как видите, ничего сложного здесь нет, но при использовании описанного скрипта, текстовые поля становятся намного информативнее.
Если первоначально данное текстовое поле создавалось не только для вывода какой-либо информации посетителям, а должно еще использоваться и для ввода какой-либо информации, для последующей отправки, то вставьте внутрь тега <input type="text" size="25" name="mobile"> событие для остановки вывода бегущей строки onclick="document.example.mobile.value = ''; stop();"
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
<input type="text" size="25" name="mobile">
на такую:
<input type="text" size="25" name="mobile" onclick="document.example.mobile.value = ''; stop();">