Как предоставить любому тексту возможность быть отредактированным?

@AlexKOR5 · Регистрация: 15.02.2019

Студворк — интернет-сервис помощи студентам

Здравствуйте, как предоставить любому тексту возможность быть отредактированным?
Это нужно как-то сделать без атрибута contentEditable.
При обычном клике на текст, он не должен выделяться и быть закурсореным.
Как это можно реализовать? Помогите пожалуйста, нету идей.
Дайте какой-то очень простой и наглядный пример реализации.

@mr_dramm · 03.08.2021, 12:04

используйте инпут без оформмления

CSS
1
2
3
4
5
    input[type="text"] {
        background: transparent;
        border: none;
        outline: none;
    }

если не нужно редактировать делайте его readonly

@AlexKOR5 · 03.08.2021, 12:35 **[ТС]**

Сообщение от mr_dramm

используйте инпут без оформмления

CSS
1
2
3
4
5
    input[type="text"] {
        background: transparent;
        border: none;
        outline: none;
    }

если не нужно редактировать делайте его readonly

Когда я убираю readonly(чтобы иметь возможность редактировать), тогда Консоль React начинает ругаться.

Code
1
index.js:1 Warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.

@mr_dramm · 03.08.2021, 18:22

Сообщение от AlexKOR5

If the field should be mutable use `defaultValue`.

вместо value в input лучше использовать defaultValue. Так как value это текущее значение, а defaultValue это значение по умолчанию.

@AlexKOR5 · 04.08.2021, 14:06 **[ТС]**

Сообщение от mr_dramm

используйте инпут без оформмления

CSS
1
2
3
4
5
    input[type="text"] {
        background: transparent;
        border: none;
        outline: none;
    }

если не нужно редактировать делайте его readonly

Текст который может быть отредактирован, может занимать несколько строк.
У input нету возможности сделать это многострочным. (Если так можно скиньте код, интересно).
Что делать?

@bodynar · 05.08.2021, 11:43

AlexKOR5, А вы про тег textarea знаете?

@AlexKOR5 · 05.08.2021, 11:56 **[ТС]**

Сообщение от bodynar

AlexKOR5, А вы про тег textarea знаете?

Знаю)

@bodynar · 05.08.2021, 14:15

AlexKOR5, А в чем тогда сложность?

По клику подменяете компонент или манипулируете со стилями компонента - как вам удобней будет

@AlexKOR5 · 05.08.2021, 16:37 **[ТС]**

Сообщение от bodynar

AlexKOR5, А в чем тогда сложность?

По клику подменяете компонент или манипулируете со стилями компонента - как вам удобней будет

Что имеете ввиду под подменой компонента(по клику)?
Для меня это звучит как что-то новое.

@bodynar · 05.08.2021, 22:40

AlexKOR5, Допустим у вас есть некий флаг readonly и на основании него делаете условный рендеринг

return readonly? (<input readonly={true} {..props} >) : (<textarea {...props} />);

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@AlexKOR5 50 / 14 / 3 Регистрация: 15.02.2019 Сообщений: 514

	Как предоставить любому тексту возможность быть отредактированным? 03.08.2021, 10:55. Показов 1053. Ответов 9 Метки нет (Все метки) Здравствуйте, как предоставить любому тексту возможность быть отредактированным? Это нужно как-то сделать без атрибута contentEditable. При обычном клике на текст, он не должен выделяться и быть закурсореным. Как это можно реализовать? Помогите пожалуйста, нету идей. Дайте какой-то очень простой и наглядный пример реализации. Миниатюры 0

@bodynar 345 / 307 / 135 Регистрация: 14.03.2015 Сообщений: 1,158 Записей в блоге: 1
	05.08.2021, 11:43
	AlexKOR5, А вы про тег textarea знаете? 1

@bodynar 345 / 307 / 135 Регистрация: 14.03.2015 Сообщений: 1,158 Записей в блоге: 1
	05.08.2021, 14:15
	AlexKOR5, А в чем тогда сложность? По клику подменяете компонент или манипулируете со стилями компонента - как вам удобней будет 1

@bodynar 345 / 307 / 135 Регистрация: 14.03.2015 Сообщений: 1,158 Записей в блоге: 1
	05.08.2021, 22:40
	AlexKOR5, Допустим у вас есть некий флаг readonly и на основании него делаете условный рендеринг `return readonly? (<input readonly={true} {..props} >) : (<textarea {...props} />);` 1