@Alexey1307

Как добавить заданный текст в input?

Как сделать, чтобы при вводе цифр в инпут, в конце добавлялось заданное значение, например слово 'рубль'? Сейчас добавленное значение видно в DevTools, но в самом input оно не отображается!

Codepen

<body>
  <input type="text"> 

<script>
  let inp = document.querySelector('input');

  inp.oninput = function() {
    inp.innerHTML += inp.value + ' рублей';
};
</script>

</body>
  • Вопрос задан
  • 369 просмотров
Решения вопроса 1
lastuniverse
@lastuniverse
Всегда вокруг да около IT тем
можно чтото типа такого написать, но это не очень кроссплатформенный способ)))
https://codepen.io/lastuniverse/pen/QWQjMPN?editor...

<body>
  <input type="text"> 

<script>
  let inp = document.querySelector('input');

  inp.oninput = function(e) {
    const val = inp.value.replace(/[^\d\.]/g, '');
    const num = parseFloat(val);
    const str = (num!==num?'0':num.toString())+(e.data=='.'?'.':'');
    
    
    inp.value = str + ' рублей';
    if(inp.selectionStart>str.length){
      inp.focus();
      inp.selectionStart=str.length;
      inp.selectionEnd=str.length;
    }    
};
</script>

</body>


но этот способ для использования требует доработки логики. например:
- могут ли быть введены дробные числа?
- сколько может быть знаков после запятой?
- правильно обрабатывать попытки ввести несколько точек
- что используется для разделения целой и дробной части (точка?запятая? обе вместе?)
- и т.д.

Итого, наиболее правильным способом мне видится способ предложенный пользователем Чипекве , но его вы уже сами делайте
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
XanXanXan
@XanXanXan
inp.innerHTML заменить на inp.value.
Только результат всё равно будет не очень, т.к. 'рублей' будет добавляться на каждое изменение.

Лучше заменить ’рублей’ на ₽ (чтобы не возиться со склонениями) и вынести в отдельный блок рядом с input.
Ответ написан
Комментировать
remberq
@remberq
Пытаюсь понять, что такое это ваше IT
Как вариант добавить в input placeholder, а уже потом в css добавить стили для него
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы