Is it possible to create an HTML text field that automatically adjusts the font size when the user types more characters than it can display?
I know Acrobat has this feature for forms, but I'm looking to implement it in HTML.
So, imagine having a text field with a limit of 3 characters:
https://i.sstatic.net/fRZYc.png
If the user goes over the limit and types a fourth character, I want the text to shrink accordingly:
Using javascript is necessary in this case.
The script checks if the input element can be scrolled, indicating overflowed content that requires a reduction in font size.
I hope you find this solution helpful!
function adjustFontSize() {
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="adjustFontSize()" onchange="adjustFontSize()">To achieve this effect, HTML and CSS alone will not suffice - the following solution leverages JavaScript and JQuery:
Check out this helpful resource: https://github.com/vxsx/jquery.inputfit.js For a demonstration, visit:
<input type="text" name="younameit" id="input">
<script type="text/javascript">
$('#input').inputfit();
</script>
To achieve what you're looking for, some basic javascript methods can be utilized. Unfortunately, there isn't a straightforward way to accomplish this using only HTML or CSS. Below is a code snippet I stumbled across created by u/adactio on Github.
<script>
window.fitText( document.getElementById("responsive_headline") );
</script>
window.fitText( document.getElementById("responsive_headline"), 1.2 );
// increase the compressor (font will shrink more aggressively)
window.fitText( document.getElementById("responsive_headline"), 0.8 );
// decrease the compressor (font will shrink less aggressively)
Remember to replace 'responsive_headline' with your own element ID! Cheers!
An imperfect DIV with text that requires a scroll bar For example: <div id="text" style='overflow:scroll;width:200px;height:200px'> <div style='font-size:64px;'>BIG TEXT</div> Lorem Ipsum is simply dummy text of th ...
.button , button{ border:solid black 2px !important; } Using this code, I have added a border to all buttons. But now, I need to exclude the buttons "searchsubmit" and "single_add_to_cart_button" from having a border. How can I achieve that? ...
I am currently designing a website. I'm wondering if there is a way to create a div with a curved bottom using HTML5, CSS3 and JavaScript. It should resemble the design of the curved header bottom ...
My code seems to be functioning correctly when connecting to the database, but I'm encountering an error. Here is the code snippet: <?php include 'header.php'; ?> <!DOCTYPE html> <html> <head> <t ...
Is there a way to utilize a microphone with JavaScript or HTML5 without relying on Flash technology? I was able to achieve this in Chrome by using webkit-speech, but I am looking for solutions that will work in other browsers as well. Any suggestions wou ...
Whenever my display size is less than 1170px, the width of the owl carousel div overflows. How can I fix this issue? jQuery(document).ready(function($) { "use strict"; // CUSTOMERS TESTIMONIALS CAROUSEL $('#customers-testimonials&a ...
After spending all day searching for an answer, I still haven't found a solution to my problem. Here is the code I am struggling with: <div class="visible-xs navbar navbar-ti navbar-fixed-top "> <div class="container"> <div class ...
I have created code for an image gallery on my webpage, "gallery.aspx". The situation is that I have an external aspx page with various links. When a user clicks on one of these links, I want them to be redirected to the image gallery but to a specific ima ...
Is it possible for the z-index or positioning of an element to hinder a user from clicking on a navbar link? When I visit my website , I find that I am unable to click on any of the links in the navigation bar. Could this be due to the z-index or position ...
Take a look at my JSFiddle demo: <http://jsfiddle.net/xrtk9enc/2/> I suspect that the issue lies within the javascript section. My html code includes an Unordered List that serves as the tab menu. Each href of the menu corresponds to a tab content, ...
Can the data from a dropped file be set in a file upload input field? Or does a dropped file need to be instantly uploaded to the server? Here is an example code snippet: <input type="file" id="drop-box" /> $("#drop-box").on('drop', fun ...
In order to gain a clearer understanding, I have a question regarding inserting data from a form. Let's say I have the following form: <form action="upload.php" method="post" enctype="multipart/form-data"> Select image to upload: <inp ...
Recently, I stumbled upon this interesting ball bouncing question while searching for some JavaScript code. While the basic bounce animation was simple to achieve, I started thinking about how we could make it more dynamic by changing the color of the ball ...
I've been working on an iOS PhoneGap app that uses Backbone and some other libraries. To handle scrolling, I implemented iScroll which has been functioning properly. However, I encountered a problem with the following code snippet: events: { &apo ...
When aiming for semantic code, I am currently debating the best way to write text within a list item. Should it be done as follows: <li> <p>This is my text</p> <p>This is another bit of text</p> </li> or <l ...
I have been attempting to implement this code snippet from JSFiddle onto my website. Although I directly copied the HTML, used the CSS inline, and placed the Javascript in an external file, the functionality does not seem to be working properly. Feel free ...
Encountering an issue with a jQuery click function. Triggering the click event on an HTML button dynamically loads styled checkbox and toggle switches based on their stored on/off state in a database. An additional click function is added to each loaded t ...
I've been struggling to set a maximum height on the slider I'm currently using. No matter what height value I input, it doesn't seem to take effect. Additionally, I attempted setting the width for the echo img row in the PHP section but enco ...
I need to rearrange my 3 columns on desktop and mobile devices in different ways. Currently, my grid structure is set up like this: <div class="row"> <div class="col-xs-3 col-md-6"> 1 </div> <div class="col-xs-3 col-md- ...
On this particular page: http://getbootstrap.com/components/#input-groups-buttons If you modify the Go! button to a label (using Chrome inspector), you will observe that the Go! button is no longer positioned on top of the input field: https://i.sstatic ...