Как динамически менять текст элемента?
Для примера возьмем простую кнопку:
<button>imgname.jpeg</button>
Задача состоит в следующем: При клике на нее, прям в ней можно редактировать название, можно стирать/вписывать любой текст(как в поле input), при этом расширение(все что после точки), трогать нельзя.
Как лучше это реализовать?
Ответы (1 шт):
Автор решения: qwabra
→ Ссылка
Чтобы изменить - необходимо дважды кликнуть по имени.
const fileNameList =
Array
.from(document.getElementsByTagName('button'))
.map(el => el.innerText)
.map(encodeURI)
console.log(fileNameList)<button><span contenteditable>name q</span>.jpeg</button>
<button><span contenteditable>name w</span>.jpeg</button>
<button><span contenteditable>name a</span>.jpeg</button>HTMLElement.contentEditablehttps://developer.mozilla.org/ru/docs/Web/API/HTMLElement/contentEditableNode.innerText
https://developer.mozilla.org/ru/docs/Web/API/Node/innerText