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

FaiyazMahmud
April 13, 2023
128 views
0 votes
2 Answers

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;

pointer-events: normal;

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

Answers

Chosen as BEST ANSWER

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:

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";
  }
}

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

(Edit)

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>

Please signup or login to give your own answer.

Click here to cancel reply.

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

Answers