Текстовые подсказки с помощью JQuery и JavaScript для цикла - PullRequest
Новая
       15

Текстовые подсказки с помощью JQuery и JavaScript для цикла

0 голосов
/ 15 апреля 2010

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

Мне интересно, почему, поскольку, когда я не использую 'for loop' в моем коде js, все работает find ...

Кстати, причина, по которой я использую цикл for, заключается в том, что я не хочу повторяться, следуя принципам «СУХОГО» ...

Спасибо за помощь!

LP

Вот код: 

<script src="/javascripts/jquery.js" type="text/javascript"></script>

<script type="text/javascript">
    var form_elements = ['#submission_url', '#submission_email', '#submission_twitter']
var text_hints = ['Website Address', 'Email Address', 'Twitter Username (optional)']

$(document).ready(function(){
    for(i=0; i<3; i++) {
      $(form_elements[i]).val(text_hints[i]);

          $(form_elements[i]).focus(function(i){
        if ($(this).val() == text_hints[i]) {
        $(this).val('');
        }
          });
          $(form_elements[i]).blur(function(i){
        if ($(this).val() != text_hints[i]) {
        $(this).val(text_hints[i]);
        }
          });
        }
    });
   </script>

Ответы [ 2 ]

0 голосов
/ 15 апреля 2010

Ребята! сценарий, который я написал, не тот, который я намеревался опубликовать ... Во всяком случае, я написал еще один скрипт, который прекрасно справляется с тем, чего я хотел достичь.

Вот оно!

Ура! * * 1005 

<script src="/javascripts/jquery.js" type="text/javascript"></script>

  <script type="text/javascript">
    if (!Array.prototype.forEach)
    {
      Array.prototype.forEach = function(fun /*, thisp*/)
      {
        var len = this.length;
        if (typeof fun != "function")
          throw new TypeError();

        var thisp = arguments[1];
        for (var i = 0; i < len; i++)
        {
          if (i in this)
            fun.call(thisp, this[i], i, this);
        }
      };
    }

    var form_elements = ['#submission_url', '#submission_email', '#submission_twitter']
    var text_hints = ['Website Address', 'Email Address', 'Twitter Username (optional)']

    $(document).ready(function(){
        form_elements.forEach(function(element, index, array){ 
            $(form_elements[index]).val(text_hints[index]);

            $(form_elements[index]).focus(function(){
                if ($(this).val() == text_hints[index]) {
                    $(this).val('');
                }
            });
            $(form_elements[index]).blur(function(){
                if ($(this).val() != text_hints[index] && $(this).val() != '') {
                    return;
                }
                else if ($(this).val() == '') {
                    $(this).val(text_hints[index]);
                }
            });
        });
    });

  </script>
0 голосов
/ 15 апреля 2010

Я сделал это некоторое время назад. это будет делать то, что вы хотите 

Query.fn.waterMark = function(options) {

        var defaults = {
            activeColor: '#484646',
            inActiveColor: '#8E8E8E'
        };
        var settings = $.extend({}, defaults, options);

        return this.each(function() {
            var initVal = $(this).val();
            $(this).focus(function() {
                if ($(this).val() === initVal) {
                    $(this).val('').css({ 'color': defaults.activeColor });
                }
                else { return false }
            });
            $(this).blur(function() {
                if ($(this).val() === '' || $(this).val() === initVal) {
                    $(this).val(initVal).css({ 'color': defaults.inActiveColor });
                }
                else { return false }
            });
        });
    };

вы просто используете его как 

$(function() {
        $('input').waterMark();
    });

это будет водяной знак, читая начальное значение. поэтому установите ваш ввод как 

<input type="text" value="Search here..." />
...