выровненный по правому краю заполнитель в <input> - PullRequest
Новая
       11

выровненный по правому краю заполнитель в <input>

0 голосов
/ 09 октября 2018

У меня есть текстовый ввод, который я хочу использовать специально для валюты.Внутри текстового поля должно быть написано [$ Other CAD]. «$ Other» должно быть выровнено по левому краю, а «CAD» должно быть выровнено по правому краю, в настоящий момент у меня есть только несколько пробелов между «$ Other» и «CAD».,Это не идеально подходит для разных браузеров и т. Д. Существует ли простой способ заставить выравнивание по правому краю только части САПР, чтобы она всегда подходила независимо от браузера?Кроме того, я могу установить два разных цвета текста для заполнителя?Например, «$» и «CAD» выделены серым цветом, а «Other» - черным 

<style>
  .donation-amount-input {
    height: 65px;
    font-size: 34px;
  }
  .form-control::placeholder {
    font-size: 34px;
  }
  #S {
    color: #aaaaaa;
    position: absolute;
    font-size: 36px;
    padding-left: 10px
  }
  #Other {
    position: absolute;
    font-size: 36px;
    padding-left: 35px;
  }
  #CAD {
    color: #aaaaaa;
    position: absolute;
    font-size: 36px;
    padding-left: 40%;
  }
</style>
<body>
  <p onclick="fakePlaceholder()" id="S">$</p>
  <p onclick="fakePlaceholder()" id="Other">Other</p>
  <p onclick="fakePlaceholder()" id="CAD">CAD</p>
  <input 
  type="text" 
  onselect="fakePlaceholder()"
  class="form-control donation-amount-input" 
  id="other-amount"
  />
</body>
<script>
  function fakePlaceholder() {
    var S = document.querySelector('S');
    S.style.display = 'none';
    var Other = document.querySelector('Other');
    Other.style.display = 'none';
    var CAD = document.querySelector('CAD');
    CAD.style.display = 'none';
  }
</script>

1 Ответ

0 голосов
/ 09 октября 2018

Вы не можете сделать это с заполнителем , вам придется создать поддельный Javascript для эффекта.Вы должны добавить три элемента: один для $, один для Other и один для CAD.Затем вы можете стилизовать их и расположить их с position: absolute; на входе, чтобы создать фальшивый заполнитель.(Не забывайте: вы не можете помещать html-элементы во входные данные, поэтому вам нужно будет обернуть входные данные и эти три элемента в другой элемент, чтобы расположить все в соответствии с ним).

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

Попробуйте что-нибудь, и если вам нужна помощь, вернитесь сюда и покажите нам свой код.

...