0

Если возможно, то желательно без JS

<input name="api-key" value="HGIer532BKe4fGY7b23rx23r">

<!-- Сделать в таком виде, а при фокусе показать полностью -->
<input name="api-key" value="HGI************23r">

2
  • Именно часть, или можно весь?
    – Pilaton
    22 янв 2022 в 23:19
  • @Pilaton только часть, менять с типом password не вариант
    – Meru382
    22 янв 2022 в 23:19

2 ответа 2

2

Фактически конечно можно решить эту задачу без JS но придется немного видоизменить разметку, так для обнаружения мыши можно использовать спобоности ссылок - :hover,а для :after какой-нибудь контейнер, в данном случае хорошо подходит span

Что касается задачи, то я ее не знаю, и вероятно сам бы предпочел делать подобные вещи средствами JS, тем более что для идеального решения только средствами CSS потребуется еще дорабатывать стили, в частности стили выделенного текста, и делать чуть больший охват вокруг input чтобы не было излишнего мерцания.

a:hover span:after{
  display:none;
}

a span:after{
  display: inline-block;
  content: "*****************";
  position: absolute;
  top: 10px;
  left: 35px;
  width: 135px;
  height: 20px;
  background: white;
}
<a>
  <span></span>
  <input name="api-key" value="HGIer532BKe4fGY7b23rx23r">
</a>
<!-- Сделать в таком виде, а при фокусе показать полностью -->
<input name="api-key" value="HGI************23r">

1

На css (на css думаю не лучший вариант такое делать и надо подстраивать под каждый случай)

.inputRow {
  position:relative;
  display:inline-block;
  font-size:18px;
}
.inputRow input {
  height:24px;
}
.inputRow span {
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  margin: auto;
  top: 0;
  bottom: 0;
  background: #fff;
  height: 22px;
  display: inline-table;
  font-size: 18px;
  pointer-events: none;
  line-height: 22px;
}
.inputRow input:focus + span, .inputRow input:active + span {
  display:none;
}
<div class="inputRow" id="pass">
<input name="api-key" value="HGIer532BKe4fGY7b23rx23r">
<span>**************</span>
</div>

На js

let ak = document.querySelector('input[name=api-key]'),
    oldVal = document.querySelector('input[name=api-key]').value,
    counStar = Math.floor(ak.value.length/100*80),
    start = Math.floor(ak.value.length/100*15),
    starText = ak.value.slice(start,counStar),
    newText = "*".repeat(counStar),
    newVal = ak.value.replace(starText, newText);
    
ak.value = newVal;

ak.onfocus = function() {
ak.value = oldVal;
};

ak.onblur = function() {
ak.value = newVal;
};
<input name="api-key" value="HGIer532BKe4fGY7b23rx23r">

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.