Як замінити виділений текст в TEXTAREA на інший?
Як це ні "дивно" :-), але реалізація галузиться через різні методи роботи з виділеннями в IE і Mozilla / Gecko:
В Internet Explorer використовуємо об'єкт selection, який представляє поточне виділення і його метод createRange, що створює об'єкт TextRange з поточного виділення. Отриманий TextRange об'єкт має властивість text (для читання і запису), яке і дає нам виділений текст. Тобто прочитали TextRange.text, зробили зміни і записали назад.
Див. Реальне використання в прикладі нижче.
Ну, а тут ситуація виглядає дещо по-іншому: для досягнення мети використовуємо властивості selectionStart і selectionEnd самого об'єкта textarea, які містять початкову і кінцеву позицію виділення відповідно. А маючи текст і знаючи в ньому початок і кінець для заміни, ми можемо легко замінити виділений фрагмент на другий використовуючи, наприклад метод "substr ()".
Як аргумент ф-ії передається об'єкт textarea і ім'я допоміжної функції, яка приймає в якості аргументу виділений текст і повертає новий текст, який замінить виділений текст. Після заміни тексту курсор встановлюється в кінець виділення.
Як перемістити (встановити) текстовий курсор в початок або кінець поля введення textarea або input?
Internet Explorer дозволяє нам зробити це за допомогою таких методів.
createTextRange () - даний метод створює об'єкт типу TextRange (текстовий діапазон) і дозволяє маніпулювати текстом. Порожній текстовий діапазон являє собою курсор - точку введення.
collapse () - даний метод об'єкта TextRange звужує текстовий діапазон до 0 (перетворює його в курсор (в точку введення)) і встановлює точку введення або в початок діапазону (collapse (true) або просто collapse (), так як значення за замовчуванням true) або в кінець (collapse (false)).
select () - медод об'єкта TextRange потрібний для візуального виділення тексту включеного в діапазон. У разі порожнього діапазону просто встановлює текстовий курсор.
як аргумент ф-ям передається об'єкт елемента вводу, наприклад: moveCaretToStart (document.formName.textareaName)
setSelectionRange (start, end) - даний метод створює текстове виділення в разі коли start і end збігаються встановить курсор в потрібну позицію
Після заміни виділеного тексту виділення пропадає. Як зробити так щоб виділення залишалося?
Для цього після заміни тексту виділяємо текст заново, використовуючи метод setSelectionRange (start, end).
Як отримати позицію текстового курсора в textarea елементі (textarea - позиція курсора)?
Ф-ії в якості аргументу передається об'єкт textarea.
Н апример: getCaretPos (document.formName.textareaName);
Як отримати кількість рядків в textarea елементі?
Зверніть увагу на те, як ведеться підрахунок рядків:
- якщо текстове поле порожньо, то функція поверне 0 (хоча курсор і блимає в першому рядку), бо рядків реально немає;
- якщо ви натиснули "Enter" і курсор перемістився в новий рядок, то це не означає що, з'явився новий рядок. Ось коли ви введете в цьому рядку щось, то рядок дійсно з'явиться, і буде враховуватися при підрахунку.
Пояснення: clientHeight повертає висоту елемента textarea без урахування всіх відступів, кордонів, смуг прокрутки;
boundingHeight повертає розмір в пікселах уявного простору, зайнятого об'єктом TextRange (в нашому випадку даний об'єкт містить весь текст і відповідно повертає висоту займану текстом в textarea елементі).
Заборона виділення тексту
Ну, і при бажанні можна ввести обмеження на загальну довжину. Ім'я користувача може бути завдовжки не більше 64 символів, а доменне ім'я до 255 символів (RFC 2821), а замість a-z0-9_ вказати еквівалент клас символів \ w (що я не зробив з метою наочності).
Введіть email для перевірки:
Для того щоб зробити більш універсальний редирект із затримкою пропишіть в розділі HEAD документа HTML наступний код:
Як отримати десяткове число в шістнадцятковому представленні (конвертація десяткового числа в шістнадцяткове)?
Приклад: Часто зустрічається і описаний нижче варіант ЯКИЙ НЕ ПОТРІБНО ВИКОРИСТОВУВАТИ, бо не потрібно винаходити велосипед! Правльно використовувати метод toString (radix), об'єкта Number, де radix задає підстава числа (від 2 до 36), що використовується для перетворення. Якщо параметр radix не вказано, то за замовчуванням використовується 10.
Наприклад, rgb (255,255,255) або rgb (100%, 100%, 100%) в FFFFFF. Заодно функція розширює скорочену шістнадцятковій запис кольору в повну, наприклад, #FAE в FFAAEE. Повертається шістнадцятковій значення кольору без ведучого символу #.
Як отримати окремо значення червоного (Red), зеленого (Green), синього (Blue) квітів з RGB значення кольору? splitRGB, HEX2RGB
Наприклад, з кольору Lime (# 00FF00, rgb (0,255,0) або rgb (0%, 100%, 0%)) отримати масив з трьох елементів (0,128,0), де нульовий елемент масиву відповідає червоному, перший зеленому, а другий синього кольорів.
Як отримати #HEX значення кольору по його імені?
Для генерації цілого псевдо-випадкового числа від 0 до n включно, використовується наступна формула:
Для генерації цілого псевдо-випадкового числа в діапазоні від m до n включно, використовується наступна формула:
де m нижня межа діапазону, а n верхня межа діапазону.
Нижче приведена функція для генерації випадкових чисел в діапазоні від m до n:
Як перемішати масив випадковим чином?
Як перенести текст на інший рядок у вікні alert?
Дуже просто, використовуйте символ розриву рядків \ n.
Увага! В html файлі текст всередині alert повинен йти одним рядком без переносів, так як інакше в деяких браузерах може виникнути помилка "Error: unterminated string literal".
Як видалити елемент масиву? / Як додати елемент в середину масиву?
Для видалення елемента з асоціативного масиву використовуйте оператор delete
Оператор delete підтримується починаючи з Nav2 +, NES3 +, IE 4 +, Opera3 +
Зауваження: властивість length оператором delete не змінюється, але це для асоціативних масивів значення не має бо length завжди для них дорівнює 0. Однак для числових масивів це вкрай важливо і пам'ятайте про це! Чому не змінюється властивість length? Тому що Array.length - це не довжина масиву, а максимальний індекс масиву який тільки був у масиву, хоча найчастіше length одно саме довжині масиву. До речі властивості length можна присвоювати значення, тим самим зменшуючи масив або розширюючи масив новими елементами зі значенням "undefined".
Для видалення елементів з числового масиву або вставки елементів зі зміною індексів і властивості length використовуйте метод splice об'єкта Array.
Синтаксис: array.splice (start, delete, arg3. ArgN)
start - число, що задає індекс, з якого має розпочатися видалення елементів і / або вставка нових елементів
delete - необов'язковий параметр вказує кількість елементів яке слід видалити починаючи з індексу start
arg3. argN - необов'язкові параметри які будуть вставлені в масив в якості нових елементів починаючи з індексу start
Якщо "delete" є числом більше нуля, то елементи починаючи з індексу "start" до елементу з індексом start + delete будуть видалені з масиву. Якщо ж delete дорівнює нулю, то віддалятися нічого не буде. Якщо delete не вказано, то всі елементи з індексу "start" до кінця масиву будуть видалені. Якщо за аргуметом delete вказані якісь параметри, то вони будуть додані до масиву як його елементи починаючи з індексу "start". Існуючі елементи перенумеровуються в сторону старших індексів надаючи місце новим елементам.
Метод splice об'єкта Array підтримується починаючи з Nav4 +, IE5.5 +, Opera5 +
Зауваження: пам'ятайте, що індекс першого елемента в масивах починається з 0.
Як дізнатися які властивості є у об'єкта (оператор for in)?
Як дізнатися все властивості об'єкта? У цьому допоможе оператор for in
Суть оператора в наступному: при кожній ітерації циклу, змінної "variable" присвоюється ім'я чергового властивості об'єкта "object".
Розглянемо функцію, яка перебирає властивості об'єкта і повертає їх разом зі значеннями у вигляді рядка:
Як перевірити, завантажилася чи картинка в браузері (чи включена завантаження картинок)?
Для цього можна скористатися подією "onLoad" картинки, якщо картинка завантажена, то виконається згадана подія, якщо немає то немає.
Тобто для перевірки того, відображаються чи картинки в браузері можна помістити на сторінці наступне:
А тепер ложка дьогтю: Opera виконує подія onLoad () навіть якщо картинка не відображається, але знаходиться в кеші, тобто була раніше завантажена і збережена в кеші. Сподіваюся це тимчасове поведінку :-(
Якщо ви використовуєте бібліотеку JQuery, то в ній функція trim вже визначена і викликається так: $ .trim ().
Отримати символ по його коду можна за допомогою методу fromCharCode об'єкта String.
Наприклад: var c = String.fromCharCode (84);
Як звернутися до елементу форми в імені якого є квадратні дужки "[]"?
Як відзначити / помітити / виділити все чекбокси (checkbox) в групі?
Насамперед всіх елементів chechbox в групі даємо однакове ім'я (атрибут name тега input). Якщо ви передаєте дані скрипту на PHP, то зручно дати назву виду name = "cboxdata []" з дужками вкінці назви, для того щоб в PHP скрипт дані були доступні через масив cboxdata. Тепер щоб відзначити або зняти всі позначки з чекбоксів потрібно викликати функцію checkAll (oForm, cbName, checked), де oForm - об'єкт форми, cbName - рядок з іенем елементів checkbox в групі, а checked це або true, або false, залежно що потрібно , відзначити або зняти позначки.
Як вибрати все значення в осередках таблиці (як обійти таблицю по осередках)?
Завдання: є таблиця з атрибутом id = "idWalkTable" і потрібно обійти всі ряди, а в них все ячеку і виветсі їх вміст.
Обійти таблицю getElementById - Повертає елемент із заданим ідентифікатором.
getElementsByTagName - Повертає колекцію всіх елементів, що мають даний тег.
Як дізнатися / змінити значення атрибута class елемента (властивість className)?
приклад: . , показує, що елементу span призначено два класи (bigText і greenText).
Зважаючи на вищесказане, не можна використовувати просте присвоювання, типу: elem.className = "greenText", щоб не затерти інші можливі значення, і слід нове значення, додати до вже наявних через пробіл (хоча якщо ви впевнені, що властивість className порожньо, то звичайно ж можна використовувати і просте присвоювання).
Перш ніж виконувати класу і видалення використовується регулярний вираз: / \ bgreenText \ b /. де \ b - це спеціальна конструкція (метасимвол) позначає кордон слова, тобто регулярний вираз шукає рядок greenText. яка є самомтоятельно словом, а не частиною іншого слова (під словом розуміється рядок без роздільників: прогалин, знаків пунктуації тощо). Використання метасимвола \ b тут в самий раз, але є одне АЛЕ, не всі браузери його розуміють (наприклад, Opera 6 і нижче). Тому, якщо потрібна підтримка таких "кривих" і старих браузерів, то слід замінити регулярний вираз "/ \ bімя класу \ b /", на менш витончене "/ (^ |) ім'я класу ($ |) /".
* IE4 +, Gecko, Opera7 +. розуміють \ b як годиться.
Для цього скористаємося подією onerror об'єкта window.
або можна призначити в якості обробника цієї події функцію, що повертає true для придушення повідомлення про помилку
Під час виникнення помилки викликається обробник події і йому передаються такі параметри: текст повідомлення, URL, номер рядка з помилкою. Для того чоби ними скористатися оголосіть їх в якості аргументів при описі функції обробника: function myErrHandler (msg, url, lno).
Зверніть увагу на те, що все що розташоване в скрипті після коду викликав помилку, виконуватися не буде!
Як дізнатися на скільки прокручений документ (scrollLeft, scrollTop)? Чому scrollLeft, scrollTop завжди дорівнюють нулю? Як прокрутити вміст вікна документа?
Дізнатися на скільки прокручений об'єкт вниз або вліво або прокрутити його на певну велечину можна за допомогою властивостей scrollTop і scrollLeft об'єкта.
Примітка: для старих браузерів Netscape (4-6), Opera 5 слід використовувати властивості pageXOffset, pageYOffset