Кнопка очистки поля

@paskalnikita · Регистрация: 12.08.2014

Author24 — интернет-сервис помощи студентам

Всем доброго времени суток! Никак не могу найти подходящий вариант для очистки поля. Хочу сделать что-то вроде как на translate.google.com . То есть, как только написал что-то в поле,появляется крестик, кликнув на который могу удалить все, что в поле, но вот только ничего более-менее подходящего не нашел. Может, кто подбросит какие варианты для решения моей проблемы? Заранее спасибо!

@Ballu · 07.05.2015, 15:53

А что мешает взять и разобрать ту часть кода, которая описана как раз в translate.google.com ?

@evanre · 07.05.2015, 16:08

Возможно я не понял вопроса, но если есть поле ввода, то есть форма, а что мешает использовать на форме input type="reset"?

@paskalnikita · 07.05.2015, 18:04 **[ТС]**

при исслежовании элемента я не знаю что из js применили к данному 'крестику'.

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

input type="reset"?

нужно чтобы 'очистить' было внитри самого поля , в котором пишут текст.

@pro100Lam · 09.05.2015, 17:50

Как вариант, решения данной задачи, использование js/jquery. Присваиваешь элементу атрибут id или class, потом создаешь событие keyup для этого элемента, и показываешь крестик. Могу помочь с кодом, но нужно HTML каркас увидеть.

@paskalnikita · 09.05.2015, 19:18 **[ТС]**

HTML5

<form name="comment_form" action="" method="post">
                            <textarea style="margin:3px;border:3px solid #40C781;border-radius:3px;" name="message" rows="7" cols="35" placeholder="Leave a comment" required ></textarea>
                            <div>
                                <input style="margin:3px;border:3px solid #40C781; border-radius:3px;"
                                        type="submit" name="submit" value="Comment"/>
                                Symbols left: <b><span id="counter">256</span></b>
                            </div>
                        </form>

На данный момент выглядит все так

Добавлено через 12 минут
Для подсчета символов еще js код, но думаю он не нужен

@pro100Lam · 10.05.2015, 21:26

HTML5

<form name="comment_form" action="" method="post" style="position: relative;">
        <textarea style="margin:3px;border:3px solid #40C781;border-radius:3px;" name="message" rows="7" cols="35" placeholder="Leave a comment" required ></textarea>
        <span style="position: absolute; top: 10px; right: 10px; display: none;"></span>
        <div>
             <input style="margin:3px;border:3px solid #40C781; border-radius:3px;"
                                        type="submit" name="submit" value="Comment"/>
             Symbols left: <b><span id="counter">256</span></b>
        </div>
</form>

Javascript

$(document).ready(function(){
    $("form[name='comment_form'] textarea").keyup(function(){
         if($(this).val().toString().length > 3){
              $(this).parent().find("span").show();
         } else {
              $(this).parent().find("span").hide();
         }
    });
 
    $("form[name='comment_form'] span").click(function(){
          $(this).parent().find("textarea").val("");
          $(this).hide();
    });
});

Как-то так, только нужно нормально стилизовать span (или другой контейнер, что больше нравиться) и разместить в углу textarea. И так же подключить библиотеку jquery.

@paskalnikita · 10.05.2015, 22:10 **[ТС]**

Буквально за пару часов, до того , как вы написали, решил вопрос. Получилось что-то такое:

HTML5

<form name="comment_form" action="" method="post">
    <div class="message-box">
        <textarea style="margin:3px;border:3px solid #40C781;border-radius:3px;" name="message" rows="7"
                        cols="35" placeholder="Leave a comment" required ></textarea>
        <div style="margin-top:-30px;margin-left:270px;" >
            <input class="clear-textarea" type="button" onclick="form.reset()" value="&#x274c;">
        </div>
    </div>
    <div style="margin-top:3px;">
        <input style="margin:3px;border:3px solid #40C781; border-radius:3px;" type="submit" name="submit" value="Comment"/>
            Symbols left: <b><span id="counter">256</span></b>
    </div>
</form>

Но только крестик это всегда там, а в Вашем варианте что-то не появляется ничего, подлючаю стили в конце документа, jQuery тоже, но только вот ничего не происходит

@pro100Lam · 10.05.2015, 22:38

Ваш вариант, работает, это хорошо. Выложите пожалуйста весь код страницы, я посмотрю в чем проблема.

@paskalnikita · 11.05.2015, 15:06 **[ТС]**

а нет,все работает

@pro100Lam · 11.05.2015, 16:16

Как я понимаю проблема была в том что span был не виден?

@paskalnikita · 11.05.2015, 17:26 **[ТС]**

да,верно,

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

span был не виден

Новые блоги и статьи
Использование связки C# и PHP в корпоративной разработке и микросервисной архитектуре InfoMaster 16.01.2025 Введение в интеграцию C# и PHP В современной корпоративной разработке все чаще возникает потребность в создании гибких и масштабируемых решений, способных эффективно решать широкий спектр. . .	Как использовать Kerio дома для управления сетью и пользователями InfoMaster 16.01.2025 Использование технологий для улучшения повседневной жизни стало неотъемлемой частью современного быта. Одной из таких технологий является Kerio — мощный инструмент для управления сетью и. . .	Есть ли будущее у DVD и Blu-ray? InfoMaster 16.01.2025 В эпоху стремительного развития цифровых технологий и повсеместного распространения потоковых сервисов вопрос о будущем физических носителей информации становится все более актуальным. Особенно остро. . .	Как проводить научные вычисления на Python InfoMaster 15.01.2025 Python стал одним из наиболее востребованных языков программирования в области научных вычислений благодаря своей простоте, гибкости и обширной экосистеме специализированных библиотек. Научные. . .	Создание игры типа Minecraft на PyGame/Python: пошаговое руководство InfoMaster 15.01.2025 В данном руководстве мы рассмотрим процесс создания игры в стиле Minecraft с использованием библиотеки PyGame на языке программирования Python. Этот проект идеально подходит как для начинающих. . .	Как создать свою первую игру в стиле Doom на Unreal Engine InfoMaster 15.01.2025 Разработка шутера от первого лица в стиле классического Doom представляет собой увлекательное путешествие в мир игрового программирования, где сочетаются творческий подход и технические навыки. . . .
Параллельное программирование: основные технологии и принципы InfoMaster 15.01.2025 Введение в параллельное программирование Параллельное программирование представляет собой фундаментальный подход к разработке программного обеспечения, который позволяет одновременно выполнять. . .	Как написать микросервис на C# с Kafka, MediatR, Redis и GitLab CI/CD InfoMaster 15.01.2025 В современной разработке программного обеспечения микросервисная архитектура стала стандартом де-факто для создания масштабируемых и гибких приложений. Этот подход позволяет разделить сложную систему. . .	Что такое CQRS и как это реализовать на C# с MediatR InfoMaster 15.01.2025 Концепция CQRS и её роль в современной разработке В современном мире разработки программного обеспечения архитектурные паттерны играют ключевую роль в создании масштабируемых и поддерживаемых. . .	Как настроить CI/CD с Azure DevOps InfoMaster 15.01.2025 CI/ CD, или непрерывная интеграция и непрерывное развертывание, представляет собой современный подход к разработке программного обеспечения, который позволяет автоматизировать и оптимизировать процесс. . .	Как настроить CI/CD с помощью Jenkins InfoMaster 15.01.2025 Введение в CI/ CD и Jenkins В современной разработке программного обеспечения непрерывная интеграция (CI) и непрерывная доставка (CD) стали неотъемлемыми элементами процесса создания качественных. . .	Как написать микросервис на Go/Golang с Kafka, REST и GitHub CI/CD InfoMaster 14.01.2025 Определение микросервиса, преимущества использования Go/ Golang Микросервис – это архитектурный подход к разработке программного обеспечения, при котором приложение состоит из небольших, независимо. . .

@paskalnikita 86 / 86 / 30 Регистрация: 12.08.2014 Сообщений: 1,129
		1
	Кнопка очистки поля 07.05.2015, 14:16. Показов 4405. Ответов 11 Метки нет (Все метки) Всем доброго времени суток! Никак не могу найти подходящий вариант для очистки поля. Хочу сделать что-то вроде как на translate.google.com . То есть, как только написал что-то в поле,появляется крестик, кликнув на который могу удалить все, что в поле, но вот только ничего более-менее подходящего не нашел. Может, кто подбросит какие варианты для решения моей проблемы? Заранее спасибо! 0

@Ballu 8 / 8 / 2 Регистрация: 25.12.2014 Сообщений: 62
	07.05.2015, 15:53	2
	А что мешает взять и разобрать ту часть кода, которая описана как раз в translate.google.com ? 0

@evanre 0 / 0 / 0 Регистрация: 18.04.2015 Сообщений: 5
	07.05.2015, 16:08	3
	Возможно я не понял вопроса, но если есть поле ввода, то есть форма, а что мешает использовать на форме input type="reset"? 0

@paskalnikita 86 / 86 / 30 Регистрация: 12.08.2014 Сообщений: 1,129
	07.05.2015, 18:04 [ТС]	4
	при исслежовании элемента я не знаю что из js применили к данному 'крестику'. Сообщение от evanre input type="reset"? нужно чтобы 'очистить' было внитри самого поля , в котором пишут текст. 0

@pro100Lam 18 / 7 / 2 Регистрация: 12.02.2013 Сообщений: 58
	09.05.2015, 17:50	5
	Как вариант, решения данной задачи, использование js/jquery. Присваиваешь элементу атрибут id или class, потом создаешь событие keyup для этого элемента, и показываешь крестик. Могу помочь с кодом, но нужно HTML каркас увидеть. 0

@pro100Lam 18 / 7 / 2 Регистрация: 12.02.2013 Сообщений: 58
	10.05.2015, 22:38	9
	Ваш вариант, работает, это хорошо. Выложите пожалуйста весь код страницы, я посмотрю в чем проблема. 0

@paskalnikita 86 / 86 / 30 Регистрация: 12.08.2014 Сообщений: 1,129
	11.05.2015, 15:06 [ТС]	10
	а нет,все работает 0

@pro100Lam 18 / 7 / 2 Регистрация: 12.02.2013 Сообщений: 58
	11.05.2015, 16:16	11
	Как я понимаю проблема была в том что span был не виден? 0

@paskalnikita 86 / 86 / 30 Регистрация: 12.08.2014 Сообщений: 1,129
	11.05.2015, 17:26 [ТС]	12
	да,верно, Сообщение от pro100Lam span был не виден 0