Рубрика: Frontend

  • Html. iOS Safari не работает аттрибут maxlength

    Не будем говорить о том, как можно игнорировать нативный html-аттрибут — просто разберем пример, как решить проблему. Решение очень простое, но, тем не менее, не уменьшает удивление от поведения Safari. $(‘input[name=»securitycode»]’).keypress(function() { if (this.value.length >= 4) { return false; } }); Данный простой код не даёт ввести в поле более, чем 4 символа. Ничего нового, […]

  • jQuery. Таблица кодов клавиш для keypress, keyup, keydown.

    В некоторых ситуациях важно детально понять, какая клавиша была нажата в поле и соответственно отреагировать на ней. В короткой статье — таблица основных важных клавиш и их кодов для обработки. Сначала пример, как же собственно «ловить» нажатие: $(‘#textbox’).keyup(function (e) { if (e.keyCode == 13) { alert(‘Нажата клавиша Enter!’); } }); Как видите — в обработчик […]

  • Bootstrap. Как отключить закрытие окна кликом за его пределами?

    В случае, когда модальное окно обязательно к прочтению или в нем, например, форма «Я соглашаюсь» — нельзя чтобы клиент имел возможность закрыть его без согласия. А это сделать ему очень просто — просто нажав за его пределами. В этой статье маленький пример, как отключить эту возможность. Для решения задачи у Вас есть два пути. Первый […]

  • Yii2. Как прокрутить страницу к первому полю с ошибкой после валидации?

    Очень удобная для пользователя фишка — прокрутка страницы к первому полю с ошибкой в случае неуспешной валидации. В этой статье я напишу, как можно просто прокрутить страницу к первой ошибке после валидации yii2. Приведу пример с реального проекта: /** * Прокрутка полсле неудачной валидации */ $(«#form»).on(«afterValidate», function (event, messages) { if(typeof $(«.has-error»).first().offset() !== «undefined») { […]

  • jQuery. Autocomplete. Как обновить данные в виджете?

    Плагин Autocomplete используется для быстрой подсказки пользователю вариантов ввода из определенного списка. Но в случае зависимости эти вариантов от других полей — обновление данных очень неочевидно. В этой статье — пример решения задачи. Самый простой пример — это зависимость условных моделей авто от марки. Когда пользователь выбрал Марку «Mercedes» — в поле модель ему должны […]

  • Как прокрутить div вниз с помощью JavaScript и jQuery?

    Задача программной прокрутки вниз может быть актуальна, например, при разработке чата. Блок сообщений всегда должен быть внизу, а последние сообщения всегда должны быть видны. Очень короткое решение — в этой статье. Пример для нативного Javascript: element.scrollTop = element.scrollHeight Пример для jQuery использует scrollTop: var targetDiv = $(«#some-div»); targetDiv.scrollTop( targetDiv.prop(‘scrollHeight’) ); Оба эти примера позволят Вам […]

  • Как отследить нажатие Ctrl+Enter с помощью jQuery?

    jQuery позволяет очень просто отслеживать комбинации клавиш. В этой статье — пример, как отследить нажатие Ctrl+Enter .на jQuery. На самом деле всё очень просто. Нам нужно использовать событие keydown и event, который генериурет нам jQuery. Например, если нам нужно отследить нажатие Ctrl+Enter на всех textarea: $(‘textarea’).on(‘keydown’, function(e) { if (e.ctrlKey && e.keyCode == 13) { […]

  • OpenLayers3. Как добавить базовые слои Google Maps.

    При работе с OpenLayers — первоочередная задача указать базовый слой. OSM, которые предлагается по умолчанию — редко удовлетворяет требованиям — поэтому в этой статье пример создания базовых слоёв с GoogleMaps. layers: [ new ol.layer.Tile({ id: ‘l0’, title: » Google Road Names», type: ‘base’, visible: ( baseLayer == ‘l0’ ), source: new ol.source.TileImage({ url: ‘http://mt1.google.com/vt/lyrs=h&x={x}&y={y}&z={z}’ }), […]

  • OpenLayers. URL-адрес карты Google Maps для базовых слоёв. (url google maps for base layers)

    В OpenLayers версии 3, в отличии от версии 2 — добавление базового слоя с GoogleMaps не есть насколько очевидным. Но, при этом ничего сложного абсолютно нет. В статье — пример определения URL по нужному Вам типу карты. Итак, базовый вид ссылки имеет вид: http://mt0.google.com/vt/lyrs=y&hl=en&x={x}&y={y}&z={z}&s=Ga Обратите внимание на параметр lyrs. Именно он отвечает за тип возвращаемых […]

  • jQuery. Как программно нажать на download-ссылку? (click trigger on download-link)

    В случае с download-ссылкой простой генерации триггера для нажатия на ссылку и соотв. начала скачивания, недостаточно. Требуется другой подход, пример которого в этой статье. Допустим, что у нас есть ссылка следующего вида: Скачать Чтобы програмно нажать на неё и вызвать диалог сохранения файла недостаточно вызвать привычный $(«#lnk»).trigger(«click»); Приведу примеры на jQuery и на нативном JS. […]