Если возможно, то желательно без JS
<input name="api-key" value="HGIer532BKe4fGY7b23rx23r">
<!-- Сделать в таком виде, а при фокусе показать полностью -->
<input name="api-key" value="HGI************23r">
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуЕсли возможно, то желательно без JS
<input name="api-key" value="HGIer532BKe4fGY7b23rx23r">
<!-- Сделать в таком виде, а при фокусе показать полностью -->
<input name="api-key" value="HGI************23r">
Фактически конечно можно решить эту задачу без 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">
На 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">