9 хитростей html-тега textarea!

« Предыдущая запись
 
  Следующая запись »
 

В основе этой статьи лежит следующая - Textarea Tricks. Я вношу некоторые коррективы и поправки в ту статью, меняю порядок для наглядности и понятности, а также предлагаю живые примеры. Итак.

Все предлагаемые хитрости делятся на три группы: "Базовые настройки", "Расширение возможностей с помощью jQuery" и "Решение проблемы исчезновения текста при клике". Начнём по порядку.

Базовые настройки textarea

Взгляните на скриншот. На нём представлено активное поле textarea (браузер Google Crome). Устраняем его некоторые, в той или иной степени, недостатки.

textarea 9 хитростей html тега textarea!

  1. Убираем обводку вокруг textarea. Во многих браузерах при клике на поле появляется обводка. Она может быть голубой, может быть жёлтой, может быть точечной, в любом случае она порой настолько не в тему, что хоть на стену лезь. Тем не менее, убрать её довольно просто - подобный образом убирали обводку вокруг ссылок (см. статью Как убрать выделение ссылок пунктирной рамкой в FireFox).
    textarea {
      outline: none;
    }
  2. Убираем уголок ресайза. В Google Chrome (возможно ещё в некоторых браузерах) всем полям textarea автоматически в нижнем правом углу приделывается уголок для ресайза. Чтобы этого не было, нужно прописать:
    textarea {
      resize: none;
    }
  3. Убираем полосы прокрутки в Internet Explorer. Даже если в поле textarea ничего нет, всеми "любимый" ишак всё равно показывает полосы прокрутки (неактивные). Чтобы их не было, прописываем следующее:

    textarea {
      overflow: auto;
    }
  4. Задаём NOWRAP. Иногда в textatea'х необхоимо сделать так, чтобы не было переносов (например, когда работаем с кодом css). Чтобы переносов не было, надо прописать свойство для текстарии.
    textarea2 9 хитростей html тега textarea!
    <textarea wrap="off"></textarea>

 

Расширение возможностей с помощью jQuery

  1. Авторесайз textarea в зависимости от объёма контента. James Padolsey сделал скрипт для jQuery, который это делает (ссылка).
    $('textarea').autoResize();
  2. Добавляем уголок для ресайза textarea. Для этого нужен не только сам jQuery, но и jQuery UI. Лично у меня адекватно эта примочка не работала. Может стоило попробовать другую версию jQuery UI.
    $("textarea").resizable();

 

Решение проблемы исчезновения текста в textarea при клике

  1. Решение HTML5 - placeholder. Этот атрибут в HTML5 помешает в текстовое поле textarea (для текстовых input'ов тоже актуально) светло-серый текст, который исчезает при клике на область. Если поле осталось пустым и вы делаете его неактивным, то текст появится вновь. Это свойство работает в Safari 5, Mobile Safari, Chrome 6 и Firefox 4 alpha.
    <textarea placeholder="ShuBlog!"></textarea>
  2. Изменяем бэкграунд textarea по клику. Для тех, у кого не работает placeholder, можно поиграться с бэкграундом. Задайте бэкграунд для текстового поля и затем настройте предлагаемый код jQuery.
    $('textarea')
      .focus(function() { $(this).css("background", "none") })
      .blur(function() { if ($(this)[0].value == '') { $(this).css("background", "url(image.png) no-repeat") } });
  3. Изменяем содержание textarea  по клику - аналог placeholder на jQuery. Делается довольно просто.
    $("#example-three")
      .data("ShuBlog!", $("#example-three").text())
      .css("color", "#ff9900")
      .focus(function() {
          var $el = $(this);
          if (this.value == $el.data("ShuBlog!")) {
            this.value = "";
          }
      })
      .blur(function() {
        if (this.value == "") {
            this.value = $(this).data("ShuBlog!");
        }
      });
    Однако в той статье, на которую была ссылка в самом начале, скрипт был сложнее и занимался он вот чем: он проверял существует ли атрибут placeholder и в случае положительного ответа, он создавал placeholder для тега, а в случае отрицательного ответа - показанный чуть выше скрипт. Смысл этих действий я не очень понял по нескольким причинам.
    Во-первых, если мы используем jQuery, то какая разница что за метод мы выберем? Не думаю, что в быстродействии это скажется. А во-вторых - placeholder имеет светлосерый текст, а если нам нужен другой цвет? В общем не ясно. Тем не менее полный скрипт приведу.
    function elementSupportsAttribute(element, attribute) {
      var test = document.createElement(element);
      if (attribute in test) {
        return true;
      } else {
        return false;
      }
    };
    $(document).ready(function(){
    if (!elementSupportsAttribute('textarea', 'placeholder')) {
      $("#example-three")
        .data("originalText", $("#example-three").text())
        .css("color", "#ff9900")
        .focus(function() {
            var $el = $(this);
            if (this.value == $el.data("originalText")) {
              this.value = "";
            }
        })
        .blur(function() {
          if (this.value == "") {
              this.value = $(this).data("originalText");
          }
        });
    } else {
      $("#example-three")
        .attr("placeholder", $("#example-three").text())
        .text("");
    }
    });
    Первые 8 строк - функция проверки существования атрибута (любого). В 10 строке мы проверяем есть ли атрибут placeholder, и в случае если нет, выполняются знакомые 11-24 строки, а если нет, то 26-28 строки. В оригинале у меня 28 строка не работала и я заменил её на упрощённую - .attr("placeholder", 'originalText'). 

В общем это всё, что я хотел Вам сегодня рассказать. Чуть ниже ссылка с примерами.

 

 

 

, ,

1 звезда2 звезд3 звезд4 звезд5 звезд (голосов: 7, средний: 4.29 из 5)
Понравилась статья или журнал? Подписывайся на продолжение!
Отзывов: 30 на запись

"9 хитростей html-тега textarea!"

  1. спс про уголки, а то я раньше не подозревал что они убираются.) кстати они есть ещ в сафари, но эт и понятно там один движок.)

  2. всегда пожалуйста =)

  3. Убило на днях то, что все разработчики браузеров, кроме оперы не хотят делать фон инпутов прозрачным, если нет бордера.. Было бы круто применять скругленный полупрозрачный gif или png, как фон..

  4. омг. но это мелочи, легко устраняется так – в див помещаешь инпут, у инпута оформление убираешь совсем нафиг, а всё оформление задаёшь диву. в результате инпут будет выглядеть как хочешь =)

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

  5. с селектами особо еще не парился…jquery не спасает?

  6. в принципе спасает, но хороших плагинов очень и очень мало, и могут возникать проблемы, при наличии нескольких зависящих друг от друга селектов.

  7. хотел сделать в див инпут, как ты говоришь, но обломился, когда увидел, что для сабмитов не действует этакое правило. как бы не убирал bg, он все-равно белый…

  8. хм, инпуты обычно хорошо бг держат. ещё вроде можно задать тип инпута image и ему дать субмит

  9. соглашусь с Александром, с инпутами как раз проблем нет, да и на многих сайтах такое используют, а вот селекты реально убивают

  10. К сожалению в Огнелисе 3.6 не работает outline: none;. Странно как-то.

  11. Действительно, странно, так как только что проверил на огнелисе 3.6.3 и 4.0, там всё работает без проблем.

  12. Спасибо за быстрый ответ. outline: none; отлично работает в опере и хроме, но это не большая проблема.
    Большой проблемой для меня является jquery... Вот пример кода:

    <script type="text/javascript" src="jquery/jquery.js"></script>
    <script type="text/javascript" src="jquery/autoresize.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $('#essay').autoResize();
    });//end ready

    Фаерфокс выдаёт слудующее: Error: $("#essay").autoResize is not a function
    Понимаю, что проблема дилетантская, но решить не могу.

    А за статью спасибо. Могу только добавить про spellcheck="false" - отключает проверку орфографии и про то как считать количество слов: .

  13. мда, мне кажеться пора идти спать, а то и коментарий не могу нормально отправить

  14. пишет, что autoResize не функция. полагаю проблема в версии жкьюри.

    а за линк спасибо, любопытно

  15. привет, может сможете мне помочь
    я сделал вот так:

    <input ..... value="имя" onfocus="if(this.defaultValue==this.value)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">

    работает как надо, а вот с textarea ничего не выходит.
    пробовал по разному, так в том числе:

    <textarea ..... onfocus="if(this.value == 'имя') this.value = '';" onblur="if(this.value == '') this.value = 'имя';"></textarea>

    (так работает вроде нормально, кроме одного но, слово "имя" появляется не сразу, а только после того как кликнешь по форме, а потом вне её)
    (сделать нужно без: AJAX, jQuery, то есть без сторонних библиотек, или ссылок на них)
    что посоветуете?
    .за статью спасибо, про уголки, у вас нашёл

  16. тогда я рекомендовал бы placeholder из html5 использовать. сейчас практически все браузеры его поддерживают, да и при этом обновляться постоянно хотят, так что свежая версия у чайников гарантирована =)

  17. спасибо за быстрый ответ )
    а я как раз вспомнил, что забыл упомянуть, нужно и без использования placeholder. так как придется многое переделывать.
    может быть можно как-то с помощью этого:
    <onfocus="if(this.defaultValue==this.value)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
    сделать то, что надо?
    ведь в input-е как надо работает, вся загвоздка получается в value
    но ведь в этом примере, сделанно без value
    <textarea ..... onfocus="if(this.value == 'имя') this.value = '';" onblur="if(this.value == '') this.value = 'имя';"></textarea>

    и могли бы вы подсказать что это вообще
    "if(this.defaultValue==this.value)this.value='';"
    я так понимаю что это функция, но на каком языке , ведь тут нету тегов ни javascript ни для php

    если сильно запутанно написал, уточняйте если не понятно :)
    спасибо

  18. уже сам сделал :)

    и теперь возникли ещё несколько вопросов.
    искал как сделать поля input, textarea, и в процессе работы, нашёл в нете много вариантов. все они работают одинаково (как нужно), но а как правильно должно это быть написано найти нигде не могу

    как мне кажется, важная деталь:
    пишу я все это не в тегах <script type="text/javascript"></script>
    а в тегах input в самой форме

    <form action="aaa.php" method="post">
    <input type="text" name="aaa" class="aaa" value="поле" onfocus="if(this.defaultValue==this.value)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
    </form>

    пример привожу, того что именно интересует, без ничего лишнего, только onfocus и onblur

    onfocus="if(this.defaultValue==this.value)this.value=''" onblur="if(this.value=='')this.value=this.defaultValue" <!-- input -->

    onfocus="if(this.defaultValue==this.value)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" <!-- input -->

    onfocus="if (this.defaultValue == this.value) this.value = '';" onblur="if (this.value == '') this.value = this.defaultValue;" <!-- input -->

    onfocus="if (this.value == this.defaultValue) { this.value = ''; }" onblur ="if (this.value == '') { this.value = this.defaultValue; }" <!-- textarea -->

    и ещё, как будет более логичней/правильней писать:

    onfocus="if (this.defaultValue == this.value) <!-- так ? -->
    onfocus="if (this.value == this.defaultValue) <!-- или так ? -->

  19. ммм, не всё понял, но постараюсь ответить:
    1) писать в <script type="text/javascript"></script> или в атрибутах тега - правильно и так, и так, а как делать - смотреть по ситуации. иногда проще функцию написать в скриптах, чем к каждому элементу прописывать одно и то же.
    2)
    onfocus="if (this.defaultValue == this.value) <!-- так ? -->
    onfocus="if (this.value == this.defaultValue) <!-- или так ? -->
    в данном случае всё равно. читаем первое: если значение по умолчанию равно введённому значению, то....
    читаем второе: если введённое значение равно значению по умолчанию, то ...

    с четырьмя примерами - не понял суть вопроса. у самого вопрос возник - для текстареи та же схема разве действует? там же проверка атрибута value идёт, а у текстареи не атрибут, а содержание между тегами. Или у меня тут пробел в знаниях =)

  20. как поняли так и ответили, ггг) но всё равно спасибо!
    (не первый раз замечаю, пытаешься обяснить как можно подробнее, а выходит только запутаней)
    ваше 1) это мне и так было ясно :) , спрашивал не это.
    ваше 2) это тоже ясно, (и я знаю, что рботает у меня и так и так), просто думал, что какой-то из вариантов должен быть более правильный, чем другой.

    “с четырьмя примерами”, это и был первый вопрос )

    “для текстареи та же схема разве действует? там же проверка атрибута value идёт, а у текстареи не атрибут, а содержание между тегами.” – да.да

    вот это у меня работает, по крайней мере в: мазила, хром, сафари, опера.
    <textarea name="hello" class="hello" onFocus="if (this.value == this.defaultValue) { this.value = ''; }" onblur ="if (this.value == '') { this.value = this.defaultValue; }">привет</textarea>

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

  21. ммм, ну, если брать четыре примера, то первые два – там не хватает пробелов, плохо читается. на тему фигурных скобок – имеет смысл обычно, когда туда нужно засунуть несколько условий. а так – использовать или нет, решать вам.
    советую почитать про стандарты оформления кода, там вы многое узнаете =)

  22. ” советую почитать про стандарты оформления кода, там вы многое узнаете ”
    с удовольствием :) я конечно погуглю, но если у вас имеется ссылка, про стандарты оформления “данного (я так понимаю это клиентский Javascript, поправьте если ошибаюсь)” кода, то буду очень благодарен :)
    спасибо!

  23. так, навскидку, не вспомню, но я давно хотел об этом написать, так что могу ускорить процесс=)

  24. Не в тему, но хочу высказать свою впечатления.
    Сайт по html&css просто великолепный! Для будущего верстальщика (каким я являюсь) очень полезен. Читать и читать!
    Спасибо автору!

  25. Огромное спасибо за приятный отзыв! Стараемся :)

  26. 9й способ, скрипт , типа аналог для placeholder. Это для других браузеров сделано. Safari текст из placeholder пока пишет в одну строку. будем надеяться скоро уберут этот глюк

  27. Татьяна
    20/09/2012 at 20:21 Постоянная ссылка Цитировать

    Ребят, подскажите код js c функцией тега textarea! заранее спасибо!он должен выполнять функции html тега textera
    только на js
    и еще отвечать на вопросы

  28. насчет плейсхолдера:
    при отправке данных формы на сервер пустые инпуты с плейсхолдером отправят пустые значения. При использовании скриптового костыля будет отправлено содержание инпута. Тоесть при использовании плейсхолдера если вы забыли ввести ФИО и нажали “Зарегистрироваться” (к примеру), то сервер выдаст вам сообщение вроде “Вы не указали свое ФИО”. Если же использовался скриптовый костыль, то регистрация пройдет успешно, но у вас будет ФИО вида “Ваше ФИО”. В таком случае нужно или на стороне сервера фильтровать ввод форм на плейсхолдерные значения, или же делать это яваскриптом перед сабмитом. Или забить и пусть об этом у юзверей голова болит =D

  29. Александр Шуйский
    12/05/2013 at 2:01 Постоянная ссылка Цитировать

    Вы абсолютно правы. Но тогда с этим делом надо уже управляться при помощи проверки введённых данных через ту же яву, что, собственно, обычно и нужно делать в таких случаях. Но учитывая дату написания текста и текущее положение дел, я бы всё таки уже уповал на плейсхолдер =)

  30. Доброго всем кодинга
    А вот возможно ли в элементе техтarea скрыть отображение HTML-тегов?
    У меня приходят данные в таком виде: 02:5007.03.2014
    вот убрать бы , не убрать, а скрыть.
    Он нужен в другом месте, в прорисовке таблицы.

Добро пожаловать, коллега! Вы можете оставить свой отзыв:





Допустимые XHTML-теги:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Подписка на комментарии