Как поместить пояснительный текст в текстовые поля в форме и навести курсор на поля? - PullRequest
Новая
       18

Как поместить пояснительный текст в текстовые поля в форме и навести курсор на поля?

0 голосов
/ 23 июня 2009

В основном две части вопроса.

  1. Как поместить пояснительный текст в текстовые поля в форме (например, написать электронное письмо в текстовой области текстового поля в форме) со стилями (т. Е. Выделенными серым цветом, чтобы предлагать) как на домашней странице Facebook. *
  2. Как навести курсор на определенное поле формы, как только страница загрузится (например, при входе в Google или Facebook)

Включен ли javascript в какую-либо из вышеуказанных процедур? если да, пожалуйста, укажите

  1. обходной путь без JavaScript и / или
  2. код JavaScript, делающий то, что нужно

Ответы [ 6 ]

5 голосов
/ 23 июня 2009

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

Затем он имеет функцию onblur, которая проверяет, является ли поле пустым. Если это так, напечатайте в нем «Напишите свой адрес электронной почты».

Второй тоже JavaScript.

Вот Пример страницы с обеими этими функциями 

<html>
<script type="text/javascript">
    function searchBox()
    {
        elem = document.getElementById("search");

        if(elem.value == "Search...")
        {
            elem.value = "";
        }
    }

    function searchBoxBlur()
    {
        elem = document.getElementById("search");

        if(elem.value == "")
        {
            elem.value = "Search...";
        }
    }

    function init()
    {
        document.getElementById("other_box").focus();
        }
        window.onload = init;
    </script>
<body>
    <input type="text" name="other_box" id="other_box" />
    <input type="text" name="search" id="search" value="Search..." onclick="searchBox()" onblur="searchBoxBlur()" />
</body>
</html>
1 голос
/ 23 июня 2009

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

Код JavaScript

  1. Просто установите в поле ввода значение по умолчанию: 

    function focus_function()
{
if (this.value=="Enter email here") {
this.value="";
this.class="actualEmail";
}
}

function blur_function()
{
if (this.value=="") {
this.value="Enter email here";
this.class="preset";
}
}

    Вы можете использовать два класса CSS: preset и actualEmail и указывать разные цвета.и т. д.

  2. Просто используйте функцию загрузки, которая фокусирует внимание на требуемом поле ввода: 

    window.onload = function() 
{
document.getElementById("email_field").focus();
}
1 голос
/ 23 июня 2009

Первый, быстрый и грязный: 

<input name="foo" value="Default text OMG!" onfocus="if(this.value == 'Default text OMG!') this.value = ''"/>

Рекомендуется сделать это событие onfocus функцией во внешнем файле JavaScript. Это даст:

Внешний скрипт: 

function checkText(el,someText){ if(el.value == someText) el.value = ''}

Ваш ввод: 

<input name="foo" value="Default text OMG!" onfocus="checkText(this,'Default text OMG!')"/>

Второй: дайте вводу, который вы хотите, «сфокусировать» идентификатор и сделайте что-то вроде этого: 

<input id="foo" name="foo" value="Default text OMG!"/>

И в сценарии: 

window.onload = function(){ document.getElementById('foo').focus() }
1 голос
/ 23 июня 2009

Для этого потребуется javascript (через инфраструктуру jQuery). Следующее было быстро напечатано и не проверено. Может потребоваться небольшая обработка. Если есть вопросы - задавайте :) 1001 *

  1. Автофокус требуемый элемент
  2. Изменить цвет текста элемента, когда не в фокусе
  3. Показывать текст по умолчанию, если предоставленный пользователем текст отсутствует 
/* Run our work once the document is ready (loaded */
$(document).ready(function(){

  /* Set initial state of field */
  $("input.first-name").val("First Name").css("color", "#CCCCCC");

  /* Attach logic to the .focus() event of our input field */
  $("input.first-name").focus(function(){

    /* What to do when this field is focused */
    $(this).val("").css("color", "#333333");

  }).blur(function(){

    /* What to do when the field is blurred */
    if ($(this).val() == "") {

      /* Set value to 'First Name,' and set color to light gray */
      $(this).val("First Name").css("color", "#CCCCCC");

    }

  });

  /* Autofocus our field */
  $("input.first-name").focus();

});
0 голосов
/ 23 июня 2009 
myField.focus();

Это должно поместить курсор в myField при загрузке страницы (если вы поместите его в конец или в блок $(document).ready() jQuery). Я видел некоторые противоречивые действия с этим в разных браузерах, поэтому ваш пробег может отличаться.

Что касается установки цвета ввода текстового поля, я бы установил для него значение по умолчанию и добавил отдельный класс CSS, когда пользователь щелкает по нему:

И ваш CSS будет выглядеть так: 

.grayedInputField {
    color: gray;
}
.activeInputField {
    color: black;
}

И когда пользователь нажимает на поле, пусть javascript добавляет в поле класс для изменения цвета текста, например, (опять же, jQuery): 

 $(".grayedInputField").focus(function(){$(this).addClass("activeInputField")});
0 голосов
/ 23 июня 2009

Существуют нестандартные атрибуты, которые вы можете рассмотреть: placeholder (работает в сафари, я думаю) и autofocus (часть спецификации HTML5) .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...