Бегущая строка в текстовом поле input
Согласитесь, что бегущая строка в текстовом поле не только привлечет внимание посетителя Вашей странички, но и будет весьма полезной, т.к. может содержать в себе необходимую подсказку по данным, которые необходимо ввести в данное поле.
Пример подобной бегущей строки в текстовом поле Вы можете наблюдать чуть ниже:
Почему-то данный способ подсказок для заполнения текстовых полей не получил широкого распространения и далеко не на каждом сайте можно встретить подобный визуальный эффект. Чаще используется атрибут placeholder, который создает статичную подсказку.
Чтобы получить подобную бегущую строку в поле текстовом input, воспользуйтесь JavaScript кодом, приведенном ниже (поместите его в начало Вашей странички):
<script type="text/javascript">
var line = "Сюда введите Ваш номер телефона...";
var speed = 100;
var i = 0;
function m_line() {
if (i++<line.length) document.primer.forma.value = line.substring(0,i);
else {
document.primer.forma.value = " ";
i = 0;
}
to = setTimeout("m_line()", speed);
}
</script>Далее необходимо добавить форму с текстовым полем input:
<div align="center">
<form name="primer" action="#">
<input type="text" size="35" name="forma" onFocus='clearTimeout(to);
this.value="";' onBlur='m_line();'>
</form>
</div>Ну и в конце необходимо вызвать прописанную ранее функцию m_line() для того, чтобы наша бегущая строка "ожила":
<script type="text/javascript">
m_line();
</script>Как видите, ничего сложного в данном JavaScript коде нету, но зато как эта бегущая строка эффектно смотрится по сравнению со статичной подсказкой.
Обратите внимание, что если кликнуть по данному текстовому полю, то скрипт бегущей строки автоматически остановится, и не будет мешать пользователю при вводе данных в поле. Если кликнуть в какое-нибудь другое место странички, то скрипт вновь возобновит свою работу и будет отображать бегущую строку. Если Вам необходимо отключить возобновление показа бегущей строки (когда поле было создано не для подсказки, а для отправки данных), то просто удалите onBlur=m_line(); из кода поля input.
Про бегущую строку в текстовом поле input с изменяющимся текстом можно посмотреть в соседней теме - input с изменяющимся текстом.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
else {
document.primer.forma.value=" ";
i=0; }
на такую - else clearTimeout(to);
<textarea name="forma" onfocus='clearTimeout(to); this.value="";' onblur='m_line();' name="text" id="text" cols="40" rows="10" title="Написать сообщение" tabindex="3"></textarea>
Работает, строка "бежит", после клика по полю пропадает, но после того когда все поля (имя, email, поле тестового поля) заполнены при отправке письма ничего не происходит.
Точнее у меня страница проверки config.php выдает строчку:
$warning = '<div class = "warning"><h2 class = "warning_text">Для отправки сообщения нужно заполнить все поля !</h2>
<p class = "back"><a href = "javascript:history.back();">Вернуться назад</a></p></div>';
хотя все поля заполнены.
Если из textarea удаляю: name="forma" onfocus='clearTimeout(to); this.value="";' onblur='m_line();'
то все работает нормально, письмо отправляется.
Javascript имеется на странице, но вот такая проблема.
Например, текст "Отправить сообщение" движется, но после клика, выдается сообщение, что не все поля заполнены, хотя информация есть во всех полях...
В данном случае, в textarea бегущая строка "Написать сообщение" и нет разницы пользователь написал письмо или нет отправится без проблем, хотя атрибут required прописан.
Если из text area удаляю:
onfocus='clearTimeout(to); this.value="";' onblur='m_line();' name="forma",
то если textarea не заполнена, то пользователь получит сообщение, что необходимо заполнить поле.
Получается, что бегущая строка воспринимается, как текст и как реализовать данный момент?
Например: <a class="button" href=""><marquee onMouseOver="this.stop()" onMouseOut="this.start()" Behavior="scroll" width="200px" scrollamount="3" Direction="left">Бегущая строка</marquee></a>
Так как тег marquee не пройдет валидацию, то хочется найти другое решение.
Для input - работает, а для ссылки с классом button, как в моем случае можно реализовать?
Заранее благодарен.
Далее в двух местах скрипта замените: document.primer.forma.value
На: document.getElementById('text').text
P.S. В IE работать не будет.
Заранее благодарен и спасибо за помощь.
function full_line() {
document.getElementById('text').text=line;
clearTimeout(to);
}
А в ссылку добавьте события onmouseover и onmouseout:
<a class="button" id="text" onmouseover='full_line();' onmouseout='m_line();' href="">
Имеется форма отправки сообщения и в ней строчка, где я и хочу применить данный скрипт, но не работает:
echo '<input id="text" onmouseover="full_line();" onmouseout="m_line();" type="submit" value="Отправить">';
Если для ссылки в html странице подключать данный код, то все нормально:
<a id="text" class="button" onmouseover='full_line();' onmouseout='m_line();' href="">Бегущая строка</a>
А в php файле не срабатывает, можно нужно указывать id формы, например:
if (i++<line.length) document.forma.submit.value=line.substring(0,i);
Хотя пробовал, не получается...
P.S. Лишний код из Вашего комментария удалил.
А возможно ли каким-то образом отключить валидацию бегущей строки? Т.к. при появлении текста бегущей строки браузер сразу показывает, что данные введены верно.