Ensure the content of a textarea input is consistently centered vertically

Question

Ensure the content of a textarea input is consistently centered vertically

I am currently working on a small project that involves using textareas. One issue I have encountered is that the text always starts at the top-left corner of the textarea.

What I would like to achieve is having the content inside the textarea always centered. I envision that when I add a new line, the text expands from the center, similar to the following illustrations:

https://i.sstatic.net/SWMmY.png https://i.sstatic.net/6NL8O.png

I have explored options like vertical alignment and inserting a div, but I am curious if there is a solution that can be achieved using just the textarea element itself.

Thank you!

javascript html css

Answer 1

Answer №1

It may not be possible to vertically align text in a textarea, but there is a workaround!

Here is how you can achieve it using HTML and CSS:

Start by creating a resizable div
Add a contenteditable p within the div
Include a placeholder for the p when it is empty
Utilize flexbox to vertically align the p: align-items: center;
Prevent overflow by adding p {white-space: pre-line;}
Remove the border on focus with
```
p {outline: 0px solid transparent;}
```

For the JavaScript part:

Retrieve the target element (p)
Set up an event listener for keypress
Detect the 'Enter' key press
Replace the default behavior with inserting a line break (new line)
Add an event listener for click on the div to focus on the p (mimicking textarea behavior)

// Get the target
let p = document.querySelector('p');
let div = document.querySelector('div');

// Set up event listener for keypress
p.addEventListener('keypress', (e) => {
  let keyCode = e.code || e.key;
  // Detect 'Enter' key press
  if(keyCode === 'Enter') {
    // Replace default behavior with inserting line break
    document.execCommand('insertLineBreak');
    e.preventDefault();
  }
});

// Set up event listener for click
div.addEventListener('click', () => {
  // Focus on p to mimic the textarea behavior
  p.focus();
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

div {
    resize: both;
    width: 200px;
    height: 150px;
    border: 1px solid;
    overflow: auto;
    margin: 30px auto;
    display: flex;
    align-items: center;
    cursor: text;
}

p {
  white-space: pre-line;
  width: 100%;
  height: fit-content;
  outline: 0px solid transparent;
}

p:empty::before {
    content: attr(placeholder);
    color: #666666; 
}

<div>
  <p contenteditable="true" placeholder="Type here..."></p>
</div>

Answer 2

It may not be possible to vertically align text in a textarea, but there is a workaround!

Here is how you can achieve it using HTML and CSS:

Start by creating a resizable div
Add a contenteditable p within the div
Include a placeholder for the p when it is empty
Utilize flexbox to vertically align the p: align-items: center;
Prevent overflow by adding p {white-space: pre-line;}
Remove the border on focus with
```
p {outline: 0px solid transparent;}
```

For the JavaScript part:

Retrieve the target element (p)
Set up an event listener for keypress
Detect the 'Enter' key press
Replace the default behavior with inserting a line break (new line)
Add an event listener for click on the div to focus on the p (mimicking textarea behavior)

// Get the target
let p = document.querySelector('p');
let div = document.querySelector('div');

// Set up event listener for keypress
p.addEventListener('keypress', (e) => {
  let keyCode = e.code || e.key;
  // Detect 'Enter' key press
  if(keyCode === 'Enter') {
    // Replace default behavior with inserting line break
    document.execCommand('insertLineBreak');
    e.preventDefault();
  }
});

// Set up event listener for click
div.addEventListener('click', () => {
  // Focus on p to mimic the textarea behavior
  p.focus();
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

div {
    resize: both;
    width: 200px;
    height: 150px;
    border: 1px solid;
    overflow: auto;
    margin: 30px auto;
    display: flex;
    align-items: center;
    cursor: text;
}

p {
  white-space: pre-line;
  width: 100%;
  height: fit-content;
  outline: 0px solid transparent;
}

p:empty::before {
    content: attr(placeholder);
    color: #666666; 
}

<div>
  <p contenteditable="true" placeholder="Type here..."></p>
</div>

Ensure the content of a textarea input is consistently centered vertically

Answer №1

Similar questions

unable to connect to the web service using webview

Encountered a problem with AngularUniversal prerendering: UnhandledPromiseRejectionWarning: Unable to locate NgModule metadata for 'class{}'

Utilizing jQuery to Capture Select Change Events

Express.js response.json method can be used to render both HTML and JSON content in the

Steps for refreshing a React component following a data fetch operation

Failed to retrieve values from array following the addition of a new element

Having trouble with webpack displaying CSS background images?

Retrieve information stored in a component's data variable

Issue with Bootstrap 5 Navbar menu link functionality after implementing 'data-bs-toggle' and 'data-bs-target' properties

Encountering an issue with React where the useContext hook is returning undefined instead of

Ways to determine the number of overlapping elements and adjust their widths

Insert a new row into the table with a value that is taken from the input fields on the form

Vue transition not functioning properly when hovering over text for changes

NextJS 13 causes tailwind to malfunction when route group is utilized

Error: Cannot access 'muiName' property as it is undefined

Guide on downloading a file from Firebase storage within a Vue-based web application

The issue of numbers not being properly summed in Node.js

Regular expression that prohibits the acceptance of numbers with leading zeros

How to Incorporate an Anchor Link into a Div as well as its Pseudo Element using CSS, Javascript, or jQuery

Arrange Drifting Components in a Fluid Layout Grid