Javascript-форум - Вроде простая проблема

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Вроде простая проблема (https://javascript.ru/forum/events/28855-vrode-prostaya-problema.html)

jorik

05.06.2012 00:15

Вроде простая проблема

Всем привет! Пишу на php в js полный чайник (постараюсь исправить в скором времени, но проблему нужно решить сейчас). Есть вроде бы простая задача (для знающих).
Существует форма, когда форма активна для ввода текста, справа возле нее должна вывоиться картинка (ввиде карандаша, типа форма редактируется).
На сколько понимаю это как то так делается

<p>Ваш email:</p><div class="input"><input  type="text" name="email"  onclick="КАРТИНКА"></div>

Как сделать так чтобы вместо картинки выводился див с определенным класом (в котром будет картинка) и как сделать так чтобы сократить и максимально вынести код за пределы html?
Так же для картинки нужен прелоад, чтобы процеса загрузки при клике на форму не было, а выводилась сразу иконка.
Извините за ламерские вопросы, описал как смог, надеюсь на Ваши разьяснения и помощь

Раед	05.06.2012 00:48

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<script type="text/javascript">
window.onload = function() {//после загрузки страницы
 var imgStyle = document.getElementById('img_container').style;//сохраняем стиль контейнера вашего карандаша в переменную
 var email = document.getElementById("email");//сохраняем инпут в переменную
 email.onfocus = function(){//при фокусировке на инпуте
  imgStyle.display = 'block';//показываем див
 };
 email.onblur = function() {//при потере фокуса
  imgStyle.display = 'none';//скрываем див
 }
}
</script>
</head><body>
<p>Ваш email:</p><div class="input"><input  type="text" name="email" id="email"></div><div id="img_container" style="display:none"><img src="http://javascript.ru/themes/defaultangy/images/balance.png"></div>
</body></html>

jorik

05.06.2012 01:22

Раед,
Огромное спасибо! Еще один вопрос, а если на странице несколько форм, возле которых при фокусе нужно выводить эту картинку ?

Раед	05.06.2012 01:51

Цитата:

Сообщение от jorik

а если на странице несколько форм, возле которых при фокусе нужно выводить эту картинку

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<script type="text/javascript">
window.onload = function() {//после загрузки страницы
 var img_container = document.createElement('div'), img;
 img_container.appendChild(img = new Image);
 img_container.style.display = 'none';
 img.src = 'http://javascript.ru/themes/defaultangy/images/balance.png';
 var formInputs = document.getElementsByTagName('input');

 for (var i=0, j=formInputs.length;i<j; i++) {
  +function() {
   var email = formInputs[i], imgCopy = img_container.cloneNode(true);

   if ((' '+email.className+' ').indexOf('showImg')===-1) return;

   email.parentNode.appendChild(imgCopy);

   email.onfocus = function(){//при фокусировке на инпуте
    imgCopy.style.display = 'block';//показываем див
   };

   email.onblur = function() {//при потере фокуса
    imgCopy.style.display = 'none';//скрываем див
   }

  }()
 }

}
</script>
</head><body>
<p>Ваш email:</p><div class="input"><input  type="text" name="email" class="showImg"></div>
<p>Ваш email:</p><div class="input"><input  type="text" name="email" class="showImg"></div>
<p>А тут у инпута нет класса showImg</p><div class="input"><input  type="text" name="email"></div>
<p>Ваш email:</p><div class="input"><input  type="text" name="email" class="showImg"></div>
<p>Ваш email:</p><div class="input"><input  type="text" name="email" class="showImg"></div>
</body></html>

devote

05.06.2012 01:53

Раед,
и как вы в этой каше что-то сами находите.

Раед	05.06.2012 01:57

Цитата:

Сообщение от devote

и как вы в этой каше что-то сами находите.

Ммм, где именно каша
Отступы подредактировал

devote

05.06.2012 02:21

Цитата:

Сообщение от Раед

Отступы подредактировал

ну теперь вроде ничего, хотя так более читабельнее:

<!DOCTYPE HTML>
<html>
    <head>
        <script type="text/javascript">

            window.onload = function() {//после загрузки страницы

                var img  = new Image(),
                    formInputs = document.getElementsByTagName('input'),
                    img_container = document.createElement('div');

                img_container.appendChild( img );
                img_container.style.display = 'none';

                img.src = 'http://javascript.ru/themes/defaultangy/images/balance.png';

                for( var i = 0, j = formInputs.length; i < j; i++ ) {

                    (function( email ) {

                        var imgCopy = img_container.cloneNode(true);

                        if ( ( ' '+email.className+' ' ).indexOf( 'showImg' ) === -1 ) {
                            return;
                        }

                        email.parentNode.appendChild( imgCopy );

                        email.onfocus = function() { //при фокусировке на инпуте
                            imgCopy.style.display = 'block';//показываем див
                        };
                        email.onblur = function() { //при потере фокуса
                            imgCopy.style.display = 'none';//скрываем див
                        }
                    })( formInputs[i] );
                }
            }
        </script>
    </head>
    <body>
        <p>Ваш email:</p>
        <div class="input">
            <input  type="text" name="email" class="showImg">
        </div>
        <p>Ваш email:</p>
        <div class="input">
            <input  type="text" name="email" class="showImg">
        </div>
        <p>А тут у инпута нет класса showImg</p>
        <div class="input">
            <input  type="text" name="email">
        </div>
        <p>Ваш email:</p>
        <div class="input">
            <input  type="text" name="email" class="showImg">
        </div>
        <p>Ваш email:</p>
        <div class="input">
            <input  type="text" name="email" class="showImg">
        </div>
    </body>
</html>

jorik

05.06.2012 13:36

спс, еще один момент, данная опция должна работать так же и для textarea и если это возможно выводить небольшое инфо к каждому полю при фокусе, вот в таком плане

Инфо для каждого поля разное

jorik

06.06.2012 11:36

никто не подскажет? :help:

Раед	06.06.2012 15:12

jorik, Вам уже подсказали.

Вот здесь можно почитать, как найти формы в документе.
Тут - про события focus/blur.
Здесь про стили и здесь про правильные показ/скрытие элемента.

Попробуйте сделать хоть что-то сами. Будет не получаться - обращайтесь.
Желаю удачи

jorik

11.06.2012 18:48

спасибо и на том. Вопрос решил. Может кому нужно будет

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}
function prepareInputsForHints() {
  var inputs = document.getElementsByTagName("input");
  for (var i=0; i<inputs.length; i++){
    inputs[i].onfocus = function () {
      this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
    }
    inputs[i].onblur = function () {
      this.parentNode.getElementsByTagName("span")[0].style.display = "none";
    }
  }
  var selects = document.getElementsByTagName("select");
  for (var k=0; k<selects.length; k++){
    selects[k].onfocus = function () {
      this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
    }
    selects[k].onblur = function () {
      this.parentNode.getElementsByTagName("span")[0].style.display = "none";
    }
  }
  var textareas = document.getElementsByTagName("textarea");
  for (var m=0; m<textareas.length; m++){
    textareas[m].onfocus = function () {
      this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
    }
    textareas[m].onblur = function () {
      this.parentNode.getElementsByTagName("span")[0].style.display = "none";
    }
  }
}
addLoadEvent(prepareInputsForHints);

html, после формы добавляем span с текстом

<span class="hint">какойто текст</span>

сss

Код:

.hint {

           display: none;

    position: absolute;

    left: 350px;

        top:5px;

    width: 250px;

        height:20px;

        text-align:center;

        box-shadow: 0 0 3px rgba(0,0,0,0.5);

    margin-top:-5px;

    border: 1px solid #ffffff;

    padding: 3px 4px;

    background: #f6f5f5 url(pointer.gif) no-repeat -10px 5px;

        border-radius: 5px;

jorik

12.06.2012 15:57

появился еще один вопрос по этому поводу, Все нормально работает, вот только IE 6-8 хоть и работает но ругется. Ошибка

Что это значит и как это можно исправить (скрипт выше)?

devote

12.06.2012 20:57

Цитата:

Сообщение от jorik

Что это значит и как это можно исправить (скрипт выше)?

это значит что элемент SPAN не удалось найти и соответственно элемента с индексом 0 нету в возвращенном значении после getElementsByTagName("span").

Можно это обойти примерно так:

( this.parentNode.getElementsByTagName( "span" )[ 0 ] || { style: {} } ).style.display = "inline";

Deff	12.06.2012 21:35

jorik,
Токо шо напоролся на такое ж в ИЕ

Нужно начинать поиск с родителя, который имеет id и далее внутрь,

jorik

13.06.2012 11:07

Цитата:

Сообщение от devote (Сообщение 181045)

( this.parentNode.getElementsByTagName( "span" )[ 0 ] || { style: {} } ).style.display = "inline";

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

Цитата:

Нужно начинать поиск с родителя, который имеет id и далее внутрь,

большое спасибо за совет, но я не очень силен в этом:) Если можно приведите пример как переделать существующий код

jorik

13.06.2012 12:07

Всем огромное спасибо, разобрался :)

Часовой пояс GMT +3, время: 06:52.