Я могу запретить движение input?

Question

[Максим Семилеткин]

Как запретить двигать поле инпута за курсором? В поле можно ввести 10 символов. Если вводить дальше, то инпут обрезает текст слева и двигается вправо. Как избавиться от этого эффекта и привязать инпут к левой стороне

Comments

[Максим Семилеткин]

Вот так это выглядит

[Максим Семилеткин]

Паддинг слева уходит влево.

Answer 1

[FinGanapre]

Нужно подкорректировать высоту и ширину относительно шрифта (через css переменные например)
Взять библиотеку для кастомного скрола и заменить стандартный + скрыть его стилизовав
Слушатель в итоге повесить на документ и отлавливать подобные элементы по data свойству(data-hidden-input), чтобы на все не вешать прослушку.
И должно работать.

вот так например, но это не инпут

Comments

[Арсений Матыцин]

Не ну переносы вниз это не серьезно)

Тогда уже проще задавать max-length и подгонять под шрифт width в PX или CH. Но все равно это будет детский сад, ибо 1 значительно меньше W, если это не моноширка.

[FinGanapre]

Арсений Матыцин, согласен:) у меня было 5 минут на эксперименты, что успел:) извольте продолжить))

[Арсений Матыцин]

FinGanapre, да я вот попробовал на скорую руку, но даже показывать не стал. Ушел за попкорном, так как ожидаю какой-то неведомой дичи в данном вопросе)

[FinGanapre]

Арсений Матыцин, можно событие input ловить ещё и переносить принудительно после первых 10 символов. По ширине не совпадёт, но задачу решит:)

[Арсений Матыцин]

FinGanapre, не, это не та жесть, что я жду) Пока варианты в меру адекватные идут.

[FinGanapre]

Арсений Матыцин, А после переноса, чтобы инпут соответствовал ширине, создавать новый элемент со стилями visability: hidden, копировать в него первые 10 символов, измерять размер и выставлять его нашему диву.

[Арсений Матыцин]

FinGanapre, вот она язь!

[FinGanapre]

Арсений Матыцин, чего только не сделаешь, чтобы людям было не удобно:)

[Арсений Матыцин]

FinGanapre, не могу знать)

Но могу знать, куда зазвать: в описании абсолютно нормальный сбиток ребят с очень специфичным названием в виде ссылки дискорда)

Answer 2

[Дима Долготер]

input{
text-align:left или right
}

Comments

[Максим Семилеткин]

Нет

[Максим Семилеткин]

Нужно сделать так, чтобы если текст не влезал , то он скрывался+ к этому скрывалась каретка.

[v3shin]

Максим Семилеткин, и пользователь не видел, что он печатает?

[ThunderCat]

Максим Семилеткин, v3shin, UX-designer, уровень - бог )

[v3shin]

ThunderCat, да фиг с ним, с UX. Задача-то интересная. =)

[Дима Долготер]

v3shin, ну коли интересно то докладываю.
Инпут делаешь например 200px и запихиваешь его в блок с шириной 100px и даешь блоку overflow-x:hidden
воть и все ребята

[FinGanapre]

SpiderPigAndCat, Мне кажется, что в input всё равно будет "скролл" до курсора при вводе текста. Но это не точно:)

Может начать с contededitable на любом теге и попробовать контролировать переносы и скролл по х через js начав с такой разметки (не факт, что это к чему-то приведёт):

<div contenteditable="true" style="width: 200px; height: 40px; border: 1px solid gray; overflow-x: scroll; overflow-y: hidden;"></div>

[Арсений Матыцин]

Запасся попкорном, подписался, жду.

[Дима Долготер]

Арсений Матыцин,
подсказывай давай, куратор)

[FinGanapre]

Арсений Матыцин, ответил:)

[Максим Семилеткин]

ThunderCat, Дак делается все для того чтобы ввести 4-ех значный код из смс. Но не хотелось бы прибегать к 4 инпутам и фокусу по ним через js

[Максим Семилеткин]

SpiderPigAndCat, А такое не робит, либо я тупой ) Он все равно инпут двигает

[Дима Долготер]

Максим Семилеткин, омагад. тебе надо просто ввести максимум n символов в input? тогда при инпуте смотри столько ведено и если больше нужного количества то вставляй содержимое до превышения