Типові задачі та готові рішення, корисні прийоми на JavaScript | jQuery [!ОНОВЛЮЄТЬСЯ!]

Привіт:) У цьому пості моя підбірка корисних скриптів JavaScript та jQuery, які використовую у своїй роботі.

JavaScript

Готові скрипти на нативному JavaScript.

Заміна значення атрибуту placeholder у полях форми

<form action="">
  <label for="name">Name:</label><br>
  <input type="text" id="form-field-name" name="name" placeholder="Your name..."><br>
  <label for="email">Email:</label><br>
  <input type="email" id="form-field-email" name="email" placeholder="Your email..."><br>
  <input type="submit" value="Submit">
</form>

let formInputName  = document.querySelector('#form-field-name');
let formInputEmail = document.querySelector('#form-field-email');

if (formInputName) {
  formInputName.placeholder = '!new name!';
}

if (formInputEmail) {
  formInputEmail.placeholder = '!new email!';
}

Перевірка чи схований елемент

<div class="wrapper">
  <div class="block-1">
    <p>Test 1</p>
  </div>
</div>

Наступний JS-код перевірятиме чи задане CSS-правило до блоку із класом block-1, тобто .block-1 {display: none;}:

let block1 = document.getElementsByClassName('block-1')[0];
// let block1 = document.querySelector('.block-1');

if (block1 && window.getComputedStyle(block1).display === 'none') {
  console.log('HIDE');
} else {
  console.log('DISPLAY');
}

Також замість директиви display можна використати visibility.

Щось зробити по кліку поза визначеним елементом

Нехай є блок із шириною та висотою, рівними 100px. Потрібно виконати якусь дію, якщо клацнути за межами цього елементу.

<div id="wrapper">
  <p>Текст</p>
</div>

#wrapper {
  width: 100px;
  height: 100px;
  background-color: red;
}

// вибір елементу, за межами якого потрібно відслідковувати клік
let myElement = document.getElementById('wrapper');

document.addEventListener('click', function(event) {
  var isClickInside = myElement.contains(event.target);

  if (!isClickInside) {
    console.log('Тут те, що потрібно робити, коли клацнув поза елементом');
  }
});

Приклад. Задача стояла приховати окремий блок у мобільному меню, яке відкривається при натисканні на іконку бургер-меню.

let specifiedElement = document.getElementsByClassName('responsive-menu-toggle')[0];

document.addEventListener('click', function(event) {
  let isClickInside = specifiedElement.contains(event.target);
         
  if (!isClickInside) {
    document.getElementsByClassName('after-mobile-menu-content')[0].style.display = 'none';
  }
});