---
title: "Код на телефоне: панель символов над клавиатурой"
description: "Панель над клавиатурой с отменой, Tab для Emmet и символами HTML, CSS и JS; автоматические двоеточие и точка с запятой в CSS; заготовки qs, ael, cl в JS."
url: https://penlab.space/blog/ru/code-keys-on-phone
language: ru
section: "Обновления"
published: 2026-10-16T19:12:13Z
updated: 2026-10-16T19:12:13Z
translation: https://penlab.space/blog/code-keys-on-phone
---

# Код на телефоне: панель символов над клавиатурой

На телефоне над клавиатурой появилась панель: отмена, повтор, Tab и символы для HTML, CSS и JS. CSS сам ставит двоеточие и точку с запятой, JS подсказывает querySelector и короткие заготовки.

Набирать код на телефоне неудобно не из-за маленького экрана, а из-за клавиатуры: скобки, кавычки, двоеточия и знак равенства спрятаны на втором и третьем слое. Чтобы написать `<a href="#">`, приходится переключать раскладку несколько раз. Теперь в редакторе Penlab на телефоне над клавиатурой появляется панель с нужными символами, а CSS и JS сами дописывают часть кода.

## Панель над клавиатурой

Панель показывается на сенсорных экранах, когда курсор стоит в одном из редакторов кода — HTML, CSS или JS. Она прилегает к верхнему краю клавиатуры и прячется вместе с ней.

![Три экрана телефона: панели HTML, CSS и JS, у каждой внизу своя строка клавиш](https://penlab.space/content/articles/code-keys-on-phone/images/code-keys-ru.webp "Набор клавиш меняется вместе с панелью: HTML, CSS, JS")

Слева в панели всегда три кнопки:

- **Отменить** и **Повторить** — шаг назад и вперёд по истории правок. На компьютере это `Ctrl+Z` и `Ctrl+Shift+Z`, а на экранной клавиатуре таких сочетаний нет.
- **Tab** — то же, что клавиша Tab на компьютере: разворачивает сокращение Emmet, а если сокращения нет — делает отступ. Набираете `ul.menu>li*3>a`, нажимаете Tab — получаете список из трёх пунктов со ссылками.

Дальше — символы, у каждой панели свои:

- **HTML:** `<` `>` `/` `=` `"` `'` `.` `#` `!`
- **CSS:** `{` `}` `:` `;` `#` `.` `-` `(` `)` `%` `!`
- **JS:** `(` `)` `{` `}` `[` `]` `=` `;` `'` `` ` `` `$` `.` `=>` `!` `&` `|`

Если ряд не помещается на экран, он прокручивается пальцем вбок.

Символ с панели вставляется так же, как набранный на клавиатуре: открывающая скобка или кавычка получает пару, а `>` в HTML закрывает тег. Нажатие не забирает фокус у редактора — клавиатура не закрывается, курсор остаётся на месте.

## CSS: двоеточие и точка с запятой

Двоеточие и точка с запятой — самые частые символы в CSS, и именно их на телефоне дольше всего искать. Теперь редактор ставит их сам:

- **Пробел после свойства превращается в `: `.** Набираете `display` и пробел — получаете `display: `, и сразу открывается список значений. Срабатывает только на известных свойствах: вложенный селектор вроде `div span` остаётся как есть.
- **Enter в конце строки ставит `;`.** Строка `color: red` после Enter становится `color: red;`, курсор переходит на новую строку с отступом. Если значение не закончено — открыта скобка, строка кончается запятой — точка с запятой не ставится.
- **Выбор свойства из подсказки** тоже вставляет `: ` и открывает список значений.

Каждая такая вставка отменяется отдельным шагом: первое «Отменить» убирает только `;` или `: `, набранное руками остаётся.

Помощь работает на всех устройствах, не только на телефоне, — в панели CSS и в `<style>` внутри HTML. Выключается в «Настройках»: пункт «CSS: двоеточие и точка с запятой».

## JS: подсказки и заготовки

В панели JS появились подсказки для объектов браузера. После `document.` в списке — `querySelector`, `getElementById`, `addEventListener` и остальные методы; то же для переменных, в которых лежит элемент.

Для самых частых вызовов есть короткие заготовки. Набираете сокращение, выбираете его в списке — вставляется вызов целиком, курсор встаёт туда, где нужно продолжить:

- `qs` → `document.querySelector('')`
- `qsa` → `document.querySelectorAll('')`
- `gid` → `document.getElementById('')`
- `ael` → `addEventListener('', (event) => {})`
- `cl` → `console.log()`

Например, вместо ввода с клавиатуры всей строки:

```js
const menu = document.querySelector('.menu');
menu.addEventListener('click', (event) => {
  console.log(event.target);
});
```

достаточно набрать `qs`, `ael` и `cl` и выбрать их в подсказках.

## Крупнее список подсказок

Список подсказок во всех панелях стал крупнее: 14 пикселей вместо 12. На телефоне в него стало проще попадать пальцем, на компьютере его легче читать.

## Где этого нет

Панель клавиш есть только в самом редакторе — на страницах нового пена и сохранённого пена. Во встроенном пене на чужом сайте код только для чтения, в мини-редакторе на главной панели JS нет, поэтому клавиш там нет. Помощь в CSS и крупный список подсказок работают везде, где можно писать код.

---

Если на телефоне вам не хватает какого-то символа — напишите нам на penlab.info@yandex.com, добавим в панель.