Expanding the size of a textarea using JavaScript

JavaScript:

function adjustRows() {
    var value = document.getElementById("test1").value.length;
    if (value <= 18) {
        value.rows = 1;
    } else if (value > 18 && value < 36) {
        value.rows = 2;
    } else if (value > 36 && value < 54) {
        value.rows = 3;
    }
}

HTML:

<input type="textarea" id="test1" style="overflow:auto" rows="1" cols="18" onkeypress="javascript:adjustRows();">

3 inquiries:

  1. How can I replace these conditional statements with a for or while loop?
  2. The maximum size of the field should be 18 but currently it doesn't work exactly at 18 even though I set cols="18".
  3. Is "onkeypress" the best method to use? I use this event to delete the value inside a textbox by pressing delete or backspace keys, which are not captured by "keypress". This means it doesn't dynamically adjust the rows.
javascriptjqueryhtmlcsstextarea

Answer №1

Textarea is not just an attribute, it's a tag in HTML

<textarea id="test1" style="overflow:auto" rows="1" cols="18">Text goes here</textarea>

When working with JavaScript, remember to assign the length to the variable, not just the element itself.

var a = document.getElementById("test1");

a.rows = (a.value.length / 18) + 1;

Note that this code has not been tested yet.

Answer №2

Just for 1)

To begin with, you must assign the row to the test1 object rather than assigning a value:

document.getElementById("test1").rows = xxx;

Furthermore, you missed addressing the values of 36 and 54. It should likely be <= 36 and <= 54.

Finally, consider this:

var contentArea = document.getElementById("test1")

if (value == 0) contentArea.rows = 1;
else if (value > 54) contentArea.rows = 3;
else contentArea.rows = Math.floor((value - 1) / 18) + 1;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Express.io is encountering an issue where it is unable to read the property 'expires' of an undefined element

I am new to working with node.js and I am attempting to utilize express.io for saving cookies. Following a tutorial at https://github.com/techpines/express.io/tree/master/examples#sessions, I have encountered the following error: root@server1 [/nodeexamp ...

javascriptnode.jsexpresscentos

External JavaScript file not executing defined function

My homepage includes a register form that should open when the register button is clicked. However, I am encountering an issue where the function responsible for opening the form from another JavaScript file is not being triggered. Here is the HTML code: ...

javascriptjqueryhtml

Is it feasible to utilize math.max with an array of objects?

When it comes to finding the largest number in an array, solutions like this are commonly used: var arr = [1, 2, 3]; var max = Math.max(...arr); But how can we achieve a similar result for an array of objects, each containing a 'number' field? ...

javascriptnode.jstypescript

The variable continuously updates itself inexplicably, without any specific code dictating it to

In the sandbox-based game I am playing, two variables are present. blocks (this is an array) and blockssave (also an array) However, there are also functions included: var game = { blocksave: function() { blockssave = blocks; blo ...

javascripthtml

What is the reason for incorporating the footer within the container?

To see the issue in question, please visit: The footer needs to span the full width. Here is the code snippet for the page: <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <div class="container"> <div c ...

phphtmlcsswordpresstwitter-bootstrap

AngularJS does not recognize a dynamically created array when using ng-include with ng-repeat

Issue with ng-repeat Directive I have encountered a problem where the ng-repeat directive does not track the addition of a new array, specifically 'options'. This issue arises when the directive is used within a template displayed using ng-dialo ...

javascriptangularjsng-dialog

Create a copy of a div element once the value of a select element has

After modifying a select option, I'm attempting to replicate a div similar to the example shown in this link: http://jsfiddle.net/ranell/mN6nm/5/ However, instead of my expected lists, I am seeing [object]. Any suggestions on how to resolve this issue ...

javascriptjqueryhtml

Is it possible to use personalized fonts alongside Google web fonts?

I'm looking to incorporate my customized font into a website using Google's font loader. Any recommendations on how to achieve this? ...

cssfontswebfontscustom-font

Get the content from a webpage, find and calculate the total count of div elements with a specific class, and display that number

Greetings everyone, I've run into a bit of a roadblock. My goal is to create a basic script that can count the number of servers currently running on this map by scraping the webpage, calculating the divs with the class ".row ark_srv1", and then displ ...

phphtmldomdocument

Utilizing jQuery to toggle containers based on link clicks

Hello everyone, I'm having trouble getting this code to work. I have a set of 4 links and I need to display one div container for 3 of them, and another for the remaining 1 link, switching back and forth. Any suggestions? <div class="content activ ...

javascriptjquery

Expanding upon Jquery Dialogs with additional dialog openings

I am facing an issue where there is an extra dialog opening after a form submission using the ajaxForm plugin. The content of the dialog is being updated by the ajaxForm function. Below is the JavaScript code that I am using: function formSubmit(target, ...

jqueryajaxjquery-uidialog

What could be causing the lack of color change in my boxes even after confirming the prompt?

function changeColor() { if (confirm("Press a button!") == true) { if(this.style.backgroundColor == "white") this.style.backgroundColor = "yellow"; else if(this.style.backgroundColor == "yellow") this.style.backgroundColor = "red"; else i ...

javascripthtmlcss

I need help with formatting a div to look like this

Looking to simplify my page by reducing the number of divs, wondering if this "tile" could be achieved without using one. Here's the example I have in mind: <a href="mks.html" class="big-tile big-tile-1"> <h1>town<br> libra ...

htmlcss

"Retrieve the position of a contenteditable element while also considering HTML

I've been exploring a method to generate annotations within HTML text using JavaScript. The approach involves the user clicking on a contenteditable <div> and obtaining the cursor's position based on their click. Subsequently, when insertin ...

javascripthtml

What is the best way to transform this into an HTML readable code?

While browsing through a template, I came across this code and I'm unsure of how to get it functioning. I've tried removing the comments, but unfortunately it doesn't seem to be working as expected. li.dropdown.navbar-cart ...

javascriptphpjqueryhtmlcss

Continuously improving the form as they evolve

I am interested in creating a form that automatically sends data when users make changes to it. For instance: Imagine a scenario where a moderator is editing an article and changes values in a select field. As soon as the change is made, an ajax request ...

jqueryajaxjavascript

The majority of the sliding banner is crafted using 90% HTML and CSS3, with just a touch

I devised a clever script to smoothly slide an image back and forth across the screen using CSS3. Unfortunately, I encountered a problem with CSS animations - they do not support changing the background-image directly. Attempting to overcome this limitatio ...

javascripthtmlanimationcss

Retaining the Chosen Tab upon Page Reload in Bootstrap 5.1

Struggling to maintain the selected tab active after page refresh. It's worth noting that I'm using Bootstrap 5.1 and have tried various solutions found for different versions without success. <ul class="nav nav-pills mb-3" id=&q ...

javascripttwitter-bootstrapbootstrap-4bootstrap-5

Updating a component (`AddBudgetModal`) while rendering a different component (`App`) is not possible. To identify the incorrect setState() call within the `AddBudgetModal` component

Here is the code snippet from App.jsx I'm facing an issue on line 44 where I'm attempting to open an addbudgetmodal by passing true or false. However, I'm getting an error message that says "Cannot update a component (App) while rendering a ...

javascriptreactjsreduxstatesetstate

Submitting the Ajax form will result in the quantity of the product in the cart being updated while remaining on

Hello, I am using ajax to keep the user on the same page after submitting a form. If successful, I will use ajax load to load another page that displays the quantity of the product. However, I am facing an issue where each subsequent submit increases the q ...

javascriptphpjqueryajaxcodeigniter