CODEWITHSUNDEEP
javascripthtmlcssreactjs
Ali Husham
Ali Husham

Reputation: 936

how to change typing direction when hit enter?

Usually, in textarea or in a contentEditable when you hit enter after every line the box will expand from the bottom and the previews text will stay in it the same position, but what I want is the previews text goes up every time I hit enter while the caret stays in the same position just like the old typographer. I tried to achieve that in the following way, but I find my self sometimes I need the textarea to be in a relative position instead of absolute position. So, are their alternative was to achieve that??

 <div className="App">
      <h1
        contentEditable
        style={{ left: "center", bottom: "200px", position: "absolute" }}
      >
        Hello CodeSandbox
      </h1>
      <h1 style={{ left: "center", bottom: "150px", position: "absolute" }}>
        __________
      </h1>
    </div>

[sandbox link] (https://codesandbox.io/s/spread-sheet-2syww?file=/src/App.js)

Upvotes: 1

Views: 60

Answers (1)

michaelT
michaelT

Reputation: 1711

With max-height and overflow-y: auto you can archive this.

h1{
    font-size: 32px;
    max-height: 68px;
    background: #dedede;
    font-size: 32px;
    outline: 0;
    overflow-y: auto;
}
Example with max. two lines of text:
<h1 contenteditable="true">Hello World</h1>

Upvotes: 1

Related Questions