Как изогнуть input?

Question

[DoggoTheKing]

Есть input type=text
Он прямой. Стандартная белая палка
Хотелось бы сделать из этой палки изогнутую палку, кочергу

Answer 1

[ⓒⓢⓢ]

Хотелось бы сделать из этой палки изогнутую палку

Боюсь спросить на сколько изогнутую, как пример не?
https://jsfiddle.net/vtLn0596/1/

Comments

[Shadowman69]

Ох ничего себе, даже так можно сделать!!! Извините за нескромный вопрос - сколько Вы лет этим (то есть версткой и все этим) занимаетесь, что знаете такие вещи?)

[Одиночка Айс]

Лучше расскажите где тут инпут и как это творчество прикрутить к форме?

[Сергей delphinpro]

Зачёт

[Ivan Bogachev]

Shadowman69,

Извините за нескромный вопрос - сколько Вы лет этим (то есть версткой и все этим) занимаетесь, что знаете такие вещи?)

Количество лет не важно, главное копать в нужную сторону)

P.S.: И да, конкретно этот пример взят из документации (developer.mozilla.org/en-US/docs/Web/SVG/Element/t...).

[Faha1998]

Одиночка Айс, ничего не мешает, брать значения js'ом и отправлять формой,ajax и т.д.

[Одиночка Айс]

Фахриддин Абдурахимов, какое значение? где оно хранится в svg? откуда его брать то?

[Faha1998]

Одиночка Айс, ага, jsfiddle.net/hVyTJ/1

[Алексей Ярков]

Кстати, если удалить весь текст, то ввести ничего больше нельзя

[xmoonlight]

Алексей Ярков, я это первым делом проверил, но не стал писать - думал может у меня что не так...

[ⓒⓢⓢ]

Алексей Ярков,

Кстати, если удалить весь текст, то ввести ничего больше нельзя

На вскидку, Потому что удаляется нода у свг элемента, тут или блокировать удаление заменяя каким-нибудь пробелом, или воссоздавать ноду заново.
Такое поведение у атрибута contenteditable ...

оффтоп

Всегда ради интереса проверяю количество изменений сделанных из примера.
122 копий за день ... :)

Answer 2

[vanyamba-electronics]

<script language="JavaScript">
function setMyTextValue() {
 myTextValue = "bla-bla-bla";
}
</script>
<form>
    <input type="hidden" name="myTextValue" />
    <svg onChange="setMyTextValue()">
</form>

Примеры можно найти здесь.

Answer 3

[Александр]

Сам input изогнуть увы никак нельзя, если функциональность инпута вам необходима, попробуйте такой костыль - добавьте на место инпута SVG как предложено в других ответах, рядом поставьте инпут с {display:none} например.
повесьте на SVG обработчик кликов, в котором по клику на рисунок перемещайте фокус на input input.focus(). А на инпуте повесьте обработчик на событие "input" в котором изменяйте содержимое текстовой строки в SVG

svg.querySelector("здесь_селектор_текстового_элемента").innerHTML = input.value;

Answer 4

[xmoonlight]

1. www.olivermusebrink.de/beta/curvedtext
2. https://github.com/codrops/Arctext
3. https://circletype.labwire.ca/
4. https://css-tricks.com/snippets/svg/curved-text-al...
5. https://www.visualcinnamon.com/2015/09/placing-tex...

BONUS: roundsliderui.com