I am facing an issue where the input box remains static with old numbers when it overflows, and newly typed numbers do not appear 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>
My goal is to have the input box take a line break and reduce the font size when it overflows, displaying numbers in two lines or maximum three lines. I attempted to achieve this using the following 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`;
}
});
}
However, it does not seem to work as intended. If I change the
pointer-events: none;
to
pointer-events: normal;
it only works after manually deleting something from the overflowing input field.