2

Basically I've made in jsfiddle the kind of thing I'm looking for. But it's meant using a contenteditable div rather than textarea. I don't mind if the div is 100% width, but I'd like the height 38px (to represent 2 lines of text).

The problem I'm finding is preventing more text from being entered when the entire area is already filled. Obviously I don't want to restrict this based on number of characters (and if I did that, I may as well use a mono-spaced font).

Any thoughts?

https://jsfiddle.net/v358Lpoq/2/

HTML...

<div class="writebox">
  <div class="writeboxprefix">Comments:</div>
  <div class="writeboxtext" contenteditable="true">
    Lorem ipsum dolor si wdq wd qwdq wqd wqddwqe dwqdwq wdq wqd 
wdq wqd wqd wqd wdqt
  </div>
</div>

CSS...

.writeboxprefix {
  height: 16px;
  float: left;
  background: white;
  font-style: italic;
  padding-right: 6px;
}

.writeboxtext {
  background-attachment: local;
  background-image: repeating-linear-gradient(white, white 15px, black 
15px, white 16px, white 19px);
  height: 38px;
  resize: none;
}

.writebox {
  font-family: Arial;
  font-size: 10pt;
  line-height: 19px;
  display: block;
  overflow: hidden;
}
Lantizia
  • 21
  • 2
  • This isn't possible without JS. If you're looking for JavaScript solutions, please tag the question accordingly. Otherwise, there is no answer to your question. – Constantin Groß Jun 05 '19 at 15:23
  • I don't mind throwing in some JS, have added the tag to the question. – Lantizia Jun 05 '19 at 15:35
  • 2
    You need to detect overflow on keyUp or keyDown, for instance: https://stackoverflow.com/questions/143815/determine-if-an-html-elements-content-overflows/143889#143889 – GaloisGirl Jun 05 '19 at 16:20
  • Well this is what I have so far but it doesn't seem to work very well... a) I've tried to get it to save the caret position before hand and then set that caret position afterwards - but it just seems to go back to the start b) it doesn't seem to want to only run when the scroll bars would appear - it always runs instead ?! https://jsfiddle.net/ogcn3t54/4/ – Lantizia Jun 07 '19 at 12:37

0 Answers0