Как привязать button к input
Перейти к содержимому

Как привязать button к input

  • автор:

Привязка button к блоку

Каким образом будет выглядеть динамическая функция, чтоб не убивать себя написанием функции для каждого блока?

Отслеживать
задан 26 апр 2018 в 6:44
115 13 13 бронзовых знаков

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

Если не менять вёрстку и рассчитывать только на порядок кнопок и блоков, то так:

var $buttons = $(".navigation input"); var $blocks = $("#charts div"); $buttons.on("click", function() < var index = $buttons.index(this); $blocks.eq(index).show(); >);

Если нужно показывать только блок последней нажатой кнопки, то меняется одна строка кода:

$blocks.hide().eq(index).show(); 

Большей гибкости и независимости от порядка элементов можно добиться, если у каждой кнопки хранить (например, data-атрибутом) ID соответствующего блока:

var $buttons = $(".navigation input"); $buttons.on("click", function() < var blockId = $(this).data("blockid"); $("#" + blockId).show(); >);

Отслеживать
ответ дан 26 апр 2018 в 6:56
19.1k 6 6 золотых знаков 30 30 серебряных знаков 44 44 бронзовых знака

Для решения данной задачи правильнее всего будет использовать цикл для генерации кнопок и блоков (переменная count — киличество блоков и кнопок к ним), а для скрытия/показа блока функцию toggle:

.blocks < display: flex; width: 200px; flex-direction: column; >.block < width: 100%; height: 20px; border: 1px solid; >.bittons

Отслеживать
ответ дан 26 апр 2018 в 7:08
Фомина Виктория Фомина Виктория
1,508 1 1 золотой знак 10 10 серебряных знаков 21 21 бронзовый знак

$(document).on('click', '.navigation input', function() < var block_id = $(this).data('block-id'); $('#charts div').hide(); // если нужно сперва скрыть все блоки; $('#charts #chart_div' + block_id).show(); >);
#charts div

Отслеживать
ответ дан 26 апр 2018 в 7:04
1,781 1 1 золотой знак 8 8 серебряных знаков 19 19 бронзовых знаков

1, Зачем использовать делегирование событий там, где это не нужно? 2. Зачем искать элемент с заданным ID (который должен быть уникальным, а элемент — прекрасно находиться по нему) только среди дочерних элементов какого-то элемента?

26 апр 2018 в 7:18

1. Не особо понял что имелось в виду, но лучше повесить событие разово в js, чем писать onClick в html (это уже давно не актуал считаю). 2. Согласен что ID элемента предполагает его уникальность и особого смысла обращаться к родителю нет, это просто сработала привычка.

26 апр 2018 в 7:28

Нет, использовать onclick я никому не советую. Речь про $(document).on(‘click’, ‘.navigation input’, . vs $(‘.navigation input’).on(‘click’, .

26 апр 2018 в 7:39

Опять же, привычка, для меня так проще и наглядней, существенной разницы думаю не будет от выбора того или другого способа объявления события.

26 апр 2018 в 7:47

Разница очень существенная. Первый вариант навесит обработчик события на динамически создаваемые элементы. Есть свои плюсы и минусы. Второй вариант навесит обработчик только на уже существующие элементы.

Значение submit

Тип submit (от англ. «submit» ‒ «отправить») создаёт кнопку отправки данных формы. При активации данной кнопки происходит отправка всех данных формы на сервер.

Внешний вид

  • Внешний вид кнопки отправки‒ кнопка отправки;
  • Внешний вид кнопки отправки с фокусом‒ фокус;
  • Внешний вид кнопки отправки с наведённым на неё курсором‒ наведение курсора;
  • Внешний вид активированной кнопки отправки‒ активация.

Примечание

  • В форму может быть включено несколько кнопок отправки;
  • Если кнопке отправки указать атрибут « name », то тогда она будет содержать пару « имя=значение », которая включается в отправляемые данные.

Поддержка браузерами

Спецификация

Верс. Раздел
HTML
2.0 Submit Button: INPUT TYPE=SUBMIT Перевод
3.2 INPUT text fields, radio buttons, check boxes, .
4.01 17.4.1 Control types created with INPUT
submit buttons.
DTD: Transitional Strict Frameset
5.0 4.10.5.1.15 Submit Button state (type=submit)
5.1 4.10.5.1.18. Submit Button state (type=submit)
XHTML
1.0 Extensible HyperText Markup Language
DTD: Transitional Strict Frameset
1.1 Extensible HyperText Markup Language

Сопутствующие атрибуты

autofocus Автоматческая фокусировка на кнопке после полной загрузки страницы. disabled Блокировка кнопки отправки.

Внешний вид заблокированной кнопки отправки

disabled=»disabled»

form Присоединение кнопки отправки к форме. formaction Задаёт URL-адреса обработчика формы. formenctype Устанавливает способ кодирования данных отправляемых на сервер. formmethod Определяет HTTP-метод передачи данных на сервер. formnovalidate Отменяет проверку данных формы перед отправкой на сервер. formtarget Указывает фрейм или окно в которое будет загружен ответ с сервера. name Присваивает имя кнопке отправки. (Создаёт пару « имя=значение ».) value Указывает текст кнопки отправки.

Внешний вид кнопки отправки с заданным текстом

value=»Текст»

Как привязать alert к input?

HTMLord

У вас input является кнопкой, как кнопка нажатие клавиш должна отслеживать? Если вам нужно на всей странице нажатие клавиш отслеживать, то вешайте событие на body:

Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Вадим Белкин @BelkinVadim
Frontend разработчик

Либо через jQuery как написали выше, или addEventListener .
Любой из этих способов подойдет, но только onkeydown сработает на кнопке если на ней есть фокус. Ушел фокус с кнопки — onkeydown не сработает

Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

javascript

  • JavaScript

Как разбить одномерный массив на двумерный из строки?

  • 1 подписчик
  • 2 часа назад
  • 48 просмотров

Как сделать кнопку в HTML

Для создания кнопок используется тег . Внутри него размещается текст или изображение, которые будут отображаться на кнопке. Например:

 

Чтобы задать кнопке имя, тип или состояние, нужно добавить атрибуты: name , disabled и type .

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Атрибут name задаёт имя кнопки. Может использоваться для идентификации элемента в скриптах.

 

Атрибут disabled блокирует доступ к кнопке.

 

Атрибут type определяет тип кнопки. Ему задают одно из трёх значений:

button — значение по умолчанию. Означает, что элемент — обычная кнопка. Она может добавлять товары в корзину или избранное, переключать слайдеры или закрывать всплывающие окна.

submit задаётся кнопкам для отправки формы. Когда пользователь нажимает на кнопку с таким типом, браузер отправляет данные формы на сервер.

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

А как же input?

Создать кнопку можно и с помощью тега , если указать ему тип button :

Это рабочий способ. О нём надо знать, ведь вы можете встретить его в проектах. Но самим так делать не стоит. У кнопок, созданных на инпуте, есть ограничения: сложно управлять размерами и положением изображений, а также нет псевдоэлементов. Поэтому оставьте для создания элементов формы, таких как текстовые поля, радиокнопки или чекбоксы. А кнопки верстайте с помощью .

Как сделать кнопку с иконкой

Посмотрим три способа создания кнопки с иконкой.

С помощью тега

Способ подойдёт для контентных изображений.

Кнопки с контентным изображением

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

Добавить инлайн SVG в разметку

Способ подойдёт, если изображение меняет состояния, как здесь:

Код простой: пишем тег и добавляем в него код SVG-изображения.

  

Вставить фоном в CSS

Способ подойдёт, если иконка играет декоративную роль и не меняется при наведении или клике на кнопку. Например, в таких случаях:

Как добавить иконку в кнопку:

  
.icon-button < background-image: url("../images/icon.svg"); background-size: 90px 97px; >

Какой способ выбрать — зависит от ваших задач и особенностей проекта. Вы также можете использовать разные методы в рамках одного проекта. Например, часть кнопок сделать со встроенным в разметку SVG, а часть — с фоновым изображением.

Материалы по теме

  • Что такое ссылки и как их ставить
  • Как сделать картинку ссылкой
  • Шаблон HTML-формы

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Осмысленный alt-текст: 6 правил

Осмысленный alt-текст: 6 правил

Альтернативный текст — это описание изображения словами. Это описание должно помогать людям, которые читают или слышат это описание, иначе оно не нужно и лучше вообще его не указывать.

Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

  • 27 февраля 2024

Что такое Lazy Loading и как её включить на сайте

Что такое Lazy Loading и как её включить на сайте

Ленивая загрузка (буквально, lazy loading) — это возможность отложить загрузку ненужного прямо сейчас медиаконтента.

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

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

  • 22 ноября 2023

Знакомство с HTML

Знакомство с HTML

Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.

HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

  • 1 ноября 2023

Специальные символы в HTML

Специальные символы в HTML

HTML использует особенные комбинации символов, чтобы корректно отображать определенные знаки на веб-страницах. Например, вместо простого знака «меньше» мы видим комбинацию <. В этой статье представлен список таких символов. Это небольшой справочник для тех, кто хочет быстро найти нужный код.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

  • 23 октября 2023

Зачем нужен метатег viewport

Зачем нужен метатег viewport

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

Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport , который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

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

  • 18 сентября 2023

Атрибут class в HTML на примерах

Атрибут class в HTML на примерах

Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.

Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

  • 14 сентября 2023

В чём отличия цитат

В чём отличия цитат

В HTML есть разные теги для цитирования и указания источников. Основные из них: , и . Давайте разберёмся в их различиях.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

  • 12 сентября 2023

Растровая и векторная графика

Растровая и векторная графика

Давайте попробуем разобраться, в чём отличие растровой графики от векторной.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

  • 13 июня 2023

Как отличить h1, h2 и h3

Как отличить h1, h2 и h3

Заголовки используются для организации и структурирования содержимого на сайте. В HTML существует шесть уровней заголовков, обозначаемых тегами от до . Каждый уровень заголовка имеет свой семантический вес, где имеет наибольший вес, а — наименьший.

Часто кажется, что заголовок — это простой и понятный тег. Но это впечатление обманчиво, потому что не всегда крупный и выделенный текст на макете является заголовком.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

При вёрстке сайта важно соблюдать семантику, чтобы все теги использовались корректно и ресурс работал без ошибок. Если напутать уровни заголовков, то структура страницы будет не семантичной, а скринридеры неправильно прочтут сайт.

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

  • 8 июня 2023

Как правильно вставлять SVG

Как правильно вставлять SVG

Есть несколько способов вставки SVG-изображения. Выбор одного из них зависит от задач, которые стоят перед верстальщиком.

SVG — это формат векторной графики, дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.

�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

В растровых форматах информация о конкретном числе точек изображения плотно упакована в бинарный кирпич. В него бесполезно заглядывать и менять его можно только в редакторах графики.

�PNG IH�aV PLTE�������0� IDAcZ�d���� �W= S�3�o;���]P ���IEND�B`�~ 

Формат SVG тоже можно создавать и менять в редакторах графики, например, в Illustrator или Figma. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.

SVG — это как отдельная HTML-страница. Когда вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.

Если смотреть на SVG как на отдельную страницу — становится понятнее, какой способ вставки вам нужен.

  • 1 июня 2023

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *