Уменьшить размер шрифта для ввода HTML при наборе большего количества шрифтов - PullRequest
Новая
       9

Уменьшить размер шрифта для ввода HTML при наборе большего количества шрифтов

0 голосов
/ 12 мая 2019

У меня есть текстовое поле HTML, которое состоит из 3 символов.Если пользователь введет 4 символа, я хочу, чтобы размер шрифта уменьшился, чтобы эти четыре символа поместились.

Acrobat имеет такое поведение для форм.Я хочу это поведение в HTML.

То есть, если у меня есть текстовое поле с 3 символами:

enter image description here

И пользовательвведите 4, я хочу, чтобы текст сократился:

enter image description here

Ответы [ 3 ]

1 голос
/ 12 мая 2019

Это невозможно с HTML / CSS - в этом решении используется JS + JQuery

Найдено: https://github.com/vxsx/jquery.inputfit.js Демонстрация: http://vxsx.github.io/jquery.inputfit.js/

<input type="text" name="younameit" id="input">
<script type="text/javascript">
    $('#input').inputfit();
</script>
1 голос
/ 12 мая 2019

Вам необходимо использовать JavaScript.Это работает путем проверки возможности прокрутки ввода, и если это возможно, это означает, что содержимое переполнилось, и в этом случае размер шрифта должен уменьшиться.
Надеюсь, это поможет! 

function changefontsize() {
  var myInput = document.getElementById('myInput');
  if(isOverflown(myInput)) {
    while (isOverflown(myInput)){
    currentfontsize--;
    myInput.style.fontSize = currentfontsize + 'px';
    }
  }else {
    currentfontsize = 13;
    myInput.style.fontSize = currentfontsize + 'px';
    while (isOverflown(myInput)){
    currentfontsize--;
    myInput.style.fontSize = currentfontsize + 'px';
    }
  }	
}

function isOverflown(element) {
    return element.scrollWidth > element.clientWidth;
}
#myInput {
  padding:5px;
  border-radius:3px;
  font-family:Arial;
  width:100px;
  font-size:13px;
  height:20px;
}
Type Here -> <input type="text" id="myInput" onkeypress="changefontsize()" onchange="changefontsize()">
1 голос
/ 12 мая 2019

Я думаю, что вы можете сделать это несколькими простыми методами javascript.Но, к сожалению, нет способа сделать это в HTML или CSS.Следующий код, который я нашел, сделан u / adactio.На github.

<script>
  window.fitText( document.getElementById("responsive_headline") );
</script>

window.fitText( document.getElementById("responsive_headline"), 1.2 );
 // turn the compressor up (font will shrink a bit more aggressively)
window.fitText( document.getElementById("responsive_headline"), 0.8 ); 
// turn the compressor down (font will shrink less aggressively)

Обязательно отредактируйте 'responseive_headline'!Ура! * * 1004

...