Как я могу добавить пробел к выровненному по правому краю элементу между cusror / caret и текстом?

#html #css

#HTML #css

Вопрос:

У меня есть ввод, и когда пользователь вводит значение, подобное 5,1, текст и курсор / курсор неудобно закрываются в зависимости от шрифта:

Пример кода, с которым можно поиграть, приведен ниже. Поэкспериментируйте со своими собственными шрифтами, чтобы найти похожий, так как я не могу поделиться тем, что изображено на изображении.

 <input
  type="text"
  style="text-align: right; font-family: 'SuperSecret';"
  value="5.1"
/>

Развернуть фрагмент

Как я могу немного разделить эти два понятия? Я не хочу каким-либо образом изменять данные, поэтому решения / хаки JS, такие как добавление пробельного символа в конец предложения, не являются предпочтительными.

Редактировать: Как обсуждалось в комментариях к принятому ответу, на самом деле это невозможно сделать с помощью CSS.

1. Вы пробовали использовать интервал между буквами ? Я не уверен, что это именно то, чего вы хотите, но, похоже, это может быть решением проблемы.

2. Вероятно, лучший способ справиться с этим — использовать маску ввода. Существует множество плагинов javascript, которые предлагают это, тогда вы можете создать свою собственную маску ввода для этого ввода. Как, может быть, этот , посмотрите пример для примера «Числа», добавляющего пробел для тысяч — аналогично тому, что вы хотите

Ответ №1:

Использовать letter-spacing

 input {
    letter-spacing: 10px;
}

 <input
  type="text"
  style="text-align: right; font-family: 'SuperSecret';"
  value="5.1"
/>

Развернуть фрагмент

Как описано в комментариях @zgood, использование padding-right добавит некоторый пробел между последним символом и правой частью поля ввода;

 input {
    padding-right: 20px;
}

 <input
  type="text"
  style="text-align: right; font-family: 'SuperSecret';"
  value="5.1"
/>

Развернуть фрагмент

1. Отличное предложение! Я приму это, если только кто-нибудь не придумает метод, который влияет только на самый правый символ (это добавляет пробелы вокруг каждого символа, делая длинные вводы болезненными для чтения.

2. Отлично! Если я правильно понимаю, решение, которое добавляет только некоторый пробел между , и 1 , будет еще лучше?

3. Вы можете сделать одну вещь, чтобы onkeypress получал текстовую строку и выполнял эту str.replace(/,/g, «, «);

4. @JoelPeltonen «предлагает метод, который влияет только на самый правый символ» в случае, если значение будет 5,15 таким 5,1 5 , действительно ли вам просто нужен пробел между , и следующим символом, а не самый правый символ?

5. @JoelPeltonen если вам нужен пробел между крайним правым символом и правым краем ввода, то почему бы вам просто не использовать padding-right его при вводе?