CODEWITHSUNDEEP
javascriptreactjsjsx
Jose Cabrera Zuniga
Jose Cabrera Zuniga

Reputation: 2627

Textarea alike but for only one line

Something I like about the textarea element is that allows automatic spell checker. This is not happening with input text element. I need an element like textarea that will only show one line and never go to a next line even if the user press enter. I tried row='1' but doesn't matter if the user press enter the content moves to a next line. This could also be a react component. Exist something like that?

Upvotes: 0

Views: 2093

Answers (2)

Liam
Liam

Reputation: 6743

As your question tagged ReactJS

import React from 'react';

class App extends React.Component {

  handleTextArea = (e) =>{
    let lineCount = 0;
    if (e.keyCode == 13) {
      lineCount++;
    }
    if (lineCount >= 1) { // set here how may lines you want
      e.preventDefault();
      return false;
    }
  }
  render() {
    return (
        <div>
        <textarea onKeyDown={this.handleTextArea}>only one line</textarea>
        </div>
    )
  }
}
export default App

Edit x3pvn9k20o

Upvotes: 2

CertainPerformance
CertainPerformance

Reputation: 371138

Like this:

document.querySelector('textarea').addEventListener('keydown', (e) => {
  if (e.keyCode === 13) e.preventDefault();
});
textarea {
  white-space: nowrap;
  overflow:hidden;
}
<textarea rows="1"></textarea>

Upvotes: 6

Related Questions