Question 42723 in Html Question posted in
Some basic documentation can be found here.

How to reduce font size and make a line break in a fixed sized input area? – Html

I’m getting a result where my input box is being static with old numbers when it’s overflown, newly typed numbers are not appearing at all.

<!DOCTYPE html>
<html>
<body>

 <input type="text" id="output-area" placeholder="0"  oninput="responsiveFont()" style=" width: 225px;
    height: 80px;
    font-size: 40px;
    text-align: right;
    pointer-events: none;">
<br><br>
<button onclick="Addition('1')">1</button>
<button onclick="Addition('2')">2</button>
<button onclick="Addition('3')">3</button>
<br><br>
<button onclick="clearAll()" style="background: red; color: white;">AC</button>
<button class="symbol"  onclick="del()">del</button>

 <script>
 let output_area = document.getElementById('output-area');
 function Addition(newValue){
            output_area.value += newValue;
        }
        
    function clearAll(){
            output_area.value = "";
        }
    function del (){
            output_area.value = output_area.value.slice(0, -1);
        }     

</script> 

</body>
</html>

All I want is when the input box is being overflowed, take a line break then reduce the font size and display numbers in 2 lines and so on maybe max 3 lines. I have tried using this function:

function responsiveFont (){
        output_area.addEventListener('input', () => {
    if (output_area.scrollWidth > output_area.clientWidth) {
    const fontSize = parseInt(window.getComputedStyle(output_area).fontSize);
    output_area.style.fontSize = `${fontSize - 10}px`;
  }
});
}

But it seems not working the way i want. but if i change the

pointer-events: none;

to

pointer-events: normal;

it works but only after deleting anything from the overflown input field manually.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found it is easier with textarea rather than an input element. Since textarea can take multiple lines of content, I don't actually needed to write something for taking a line break. So I made the solution this way:

    1. write a function for reducing the font-size when the textarea reaches at a certain number of length.

    function lineBreak (){
        if (output_area.value.length > 8) {
    output_area.style.fontSize = "25px";
  } else {
    output_area.style.fontSize = "40px";
  }
}

    1. I wrote another function for disabling the textarea with an alert message, when the textarea reaches it's maxLength :

    function disableOnOverflow(textarea) {
  if (textarea.scrollHeight > textarea.offsetHeight) {
    textarea.disabled = true;
  } else {
    textarea.disabled = false;
  }
  
}

    Here is the final result:

    <!DOCTYPE html>
<html>
<head>
<style>
#output-area{
    width: 200px;
    height: 70px;
    font-size: 40px;
    text-align: right;
    resize: none;
</style>
</head>
<body>

<textarea id="output-area" placeholder="0"></textarea>

<br><br>
<button onclick="Addition('1')">1</button>
<button onclick="Addition('2')">2</button>
<button onclick="Addition('3')">3</button>

<br><br>
<button onclick="clearAll()" style="background: red; color: white;">AC</button>
<button class="symbol"  onclick="del()">del</button>

<script>
let output_area = document.getElementById('output-area');
        output_area.maxLength = 25;

        function clearAll(){
            output_area.value = "";
            output_area.style.fontSize = '40px';
        }
        function del (){
            output_area.value = output_area.value.slice(0, -1);

        }
        function Addition(newValue){
 if (output_area.value.length <= output_area.maxLength) {
    output_area.value += newValue;
  } else {
     alert("Oops! I can't take anymore. Pleas try to clear something");
  }
  disableOnOverflow(output_area);
  lineBreak();
}

        function disableOnOverflow(textarea) {
  if (textarea.scrollHeight > textarea.offsetHeight) {
    textarea.disabled = true;
  } else {
    textarea.disabled = false;
  }

}
    function lineBreak (){
        if (output_area.value.length > 8) {
    output_area.style.fontSize = "24px";
  } else {
    output_area.style.fontSize = "40px";
  }
}
</script>

</body>
</html>

    For a comparison, I'm adding 2 links, 1 with the problem and 1 after solving the problem. Here is my CodePen link, it is the output which I wanted to change. Here is my GitHub live page link: JavaScript Calculator it is after solving the issue. Thanks


  2. 0

    you must respoinsiveFont function put to Addiction Fuction, not oninput.
    because oninput event just catch real keyboard input type not button.

    let output_area = document.getElementById('output-area');

function Addition(newValue){
  output_area.value += newValue;
  responsiveFont();
}        
function clearAll(){
   output_area.value = "";
   output_area.style.fontSize = '40px';
}
function del(){
  output_area.value = output_area.value.slice(0, -1);
}     

function responsiveFont(){
  console.log(output_area.scrollWidth + " / " + output_area.clientWidth);
  if (output_area.scrollWidth > output_area.clientWidth) {
    const fontSize = parseInt(window.getComputedStyle(output_area).fontSize);
    output_area.style.fontSize = `${fontSize - 10}px`;
  }
}
    #output-area{
    width: 225px;
    height: 80px;
    font-size: 40px;
    text-align: right;
    pointer-events: none;
}
    <input type="text" id="output-area" placeholder="0">

<br><br>
<button onclick="Addition('1')">1</button>
<button onclick="Addition('2')">2</button>
<button onclick="Addition('3')">3</button>

<br><br>
<button onclick="clearAll()" style="background: red; color: white;">AC</button>
<button class="symbol"  onclick="del()">del</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search