Как сделать чтобы на кнопку нельзя было нажать js

Добавил пользователь Alex
Обновлено: 05.10.2024

С помощью нескольких строк javascript, вы сможете легко организовать скрытые блоки с содержанием, раскрывающиеся по клику.
Согласитесь, иногда лучше сделать маленький блок скрытого текста с аккуратной кликабельной надписью, скрыть под ней, например: правила комментирования, html-код кнопки или баннера и т.д. Тот, кому это очень нужно — нажмёт на выделенную надпись и всё увидит. Нет необходимости постоянно держать на виду у всех определённые данные.

текст текст текст

Тут всё очень просто, class="tt" используем для оформления фразы(слова) в css, где навешиваем курсор, выделяем, подчеркиваем если нужно и т.д., с помощью onclick="view('t1'); return false" привязываемся через идентификатор t1 к исполняемому js, и к скрытому до поры до времени блоку с содержанием.
В зависимости от того, сколько вы будете использовать скрытых блоков на одной странице, вам необходимо менять порядковый номер id, т.е. t1, t3, t3 и так далее…

Для скрытого текста, можете использовать div-контейнер, или же, как в примере, всё тот же тег , главное связать его классом с css и не забыть правильно указать идентификатор:

Здесь размещаете любой текст, а можете разбавить и картинкой….

Показать скрыть блок при клике -можно просто огромным количеством способов! И мы делали несколько страниц, по теме скрыть показать блок по нажатию кнопки js(javascript).
Начнем с простого, как скрыть блок в теории, с логики скрипта, потом перейдем к тому как показать блок и внизу будет архив, который можно будет скачать! Пару слов о программировании:

Друзья! Еще раз хочу обратить ваше внимание! Что программирование - это не математика и здесь 1 + 1 = 2 - можно сложить иногда сотней способов! На странице представлены варианты скрипта скрыть показать блок, которые, я когда-то делал, и которые до сих пор использую. Естественно, что самый продвинутый в этом плане последний скрипт показать крыть блок по клику, не только по кнопке, но и по странице! Это реализовано на данной странице - если вы посмотрите на значок лупа в правой стороне меню!

Еще для ознакомления:

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

Нам понадобится два дива, один из них будет кнопкой - это самый простой код, который я только смог придумать!

Во внутрь дива поместим ид, в стили поставим бордюр, чтобы видеть, где наш блок: style="border:1px solid black;"
На кнопку повесим onclick и прямо внутри onclick, поместим getElementById
Обратимся к выше анонсированному ид(example) и отправим туда через style свойство display='none'

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

Как скрыть блок, который не виден, либо был скрыт ранее, возьмем код из первого примера и изменим ид, он должен быть уникальным!

И в стили будем добавлять style.display='none' , в свойствах блока сделаем стили none

Скрыть показать блок по клику

Следующим пунктом соединим первые два - и у нас получится самый первый скрипт - скрыть-показать блок по клику, нажав по кнопке!

У нас получится две кнопки и один блок.

1. Когда нам требуется скрыть блок, то кнопка Показать(example_2_1) не видна.

Нажимаем по кнопке Скрыть, и вешаем сразу три getElementById на onclick - в блок отправляем none, в саму кнопку, на которую нажали тоже отправляем none, а в кнопку показать отправляем block

2. Когда мы видим кнопку Показать - значит наш блок скрыт! Теперь на кнопку Показать, вешаем также 3 getElementById, в саму кнопку показать => none, а на Скрыть и блок отправляем => block
3. Искушенному пользователю( с другой стороны искушенный, что здесь будет делать!?) может показаться данный слишком вульгарным! Но когда ваш проект начинается разрастаться ло огромных размеров, а кнопку надо нарисовать здесь в одном месте, чтобы потом не бегать и не напрягать последнюю прямую извилину, где эта хрень сидит! Со стилями с html кодом, с js и все в разных местах.

Такое простое событие, как onclick в javascript, может быть вызвано несколькими способами и скрыает некоторые тонкости. Событие происходит при клике по элементу левой кнопкой мыши. Стоит заметить, что при клике происходит так же ещё два события, а именно нажатие на кнопку мыши и её отжатие.

Самый простой способ повесить событие onclick, это прописать его непосредственно в html теге:

Рассмотренный вариант можно использовать если событие содержит мало кода. Иначе, следует обратить внимание на другие способы.

Выносим код события onclick в javascript-функцию

Следующий способ хорош тем, что мы отделяем javascript-код от html тегов. В теге прописываем название функции, а саму функцию выносим в отдельный блок:

Вешаем onclick на элемент из javascript-кода

Рассмотим еще один способ, на мой взгляд, самый практичный и надежный. Хорош он тем, что событие можно повесить на множество элементов. Для этого требуется выбрать при помощи javascript-селекторов элементы, к которым требуется применить событие onclick.

Применяем jQuery

Если в проекте используется библиотека jQuery, то можно ещё упростить код. Рассмотрим два самых распространенных способа:

И ещё один вариант, который идентичен предыдущему.

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

Мне нужна простая загрузка файла, которая будет делать так же, как это:

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

Аналогично, можно ли запускать простую загрузку через JavaScript?

Я определенно не ищу способ создания якоря, который выглядит как кнопка, использует любые внешние скрипты или беспорядок с заголовками серверов или типом mime.

ОТВЕТЫ

Ответ 1

Для кнопки, которую вы можете сделать

Ответ 2

Вы можете инициировать загрузку с помощью атрибута HTML5 download .

Ответ 3

Ответ 4

С помощью jQuery:

Ответ 5

Старый поток, но в нем отсутствует простое решение js:

Ответ 6

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

Он также очень силен, нет мигания нового окна/вкладки, например, при использовании window.open .

Ответ 7

Bootstrap версия

Документировано в Bootstrap 4, а также работает в Bootstrap 3.

Ответ 8

Ответ 9

Я думаю, что это решение, которое вы искали

У меня был случай, когда мой Javascript сгенерировал CSV файл. Поскольку для его загрузки нет удаленного URL-адреса, я использую следующую реализацию.

Ответ 10

Вы можете скрыть ссылку для загрузки и нажать на нее кнопку.

Ответ 11

Если вы ищете ванильное решение JavaScript (без jQuery) и без использования атрибута HTML5, вы можете попробовать это.

Ответ 12

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

JS для обновления атрибута действия формы:

Вызов JS для обновления атрибута действия формы:

Тег формы с кнопкой отправки:

Далее работала НЕ:

вдохновил на ответ @Cfreak, который не является полным

Ответ 17

атрибут загрузки сделать это

Ответ 18

Вы можете добавить тег без текста, но со ссылкой. и когда вы нажимаете кнопку, как в коде, просто запустите функцию $ ("yourlinkclass"). click().

Ответ 19

Вы можете просто использовать:

Ответ 20

Используйте обычную ссылку и создавайте ее как кнопку, используя CSS.

Ответ 21

Ответ 22

Для меня кнопка объявления вместо текста привязки работает очень хорошо.

В большинстве правил это может быть не совсем нормально, но выглядит довольно неплохо.

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

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

Скрипты используемые в этих примерах сделаны для библиотеки jQuery

Кнопка "показать еще"

В этом примере часть контента с классом hide-content скрывается и показывается нажатием на кнопку или любой другой элемент с классом show-more

Каждая кнопка и скрытый текст должны находиться в контейнере content-block

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CSS в этом примере не выкладываю, т.к. оформление тут индивидуальное, но если кому нравится эта кнопка, ее код представлен ниже.

Читайте также: