CODEWITHSUNDEEP
javascripthtmlcsstextarea
synaptik
synaptik

Reputation: 9499

Draw vertical line in HTML textarea at predefined column position

Would like to draw a vertical line at a predefined column position in an HTML textarea. For example, a vertical line at character position 80. The purpose is to guide the user entering information so that they don't enter too long lines.

So, for example, here's how I would like the textarea to look, more or less:

enter image description here

Below is a code snippet to work from, though there isn't much there.

<textarea id="input" rows="10" cols="100"></textarea>

UPDATE: Here is a fully implemented solution based on the accepted answer.

This is just a simple tool I use to create comment blocks for source code. Because of line wrapping in certain systems I'm using, I need to indicate how long of a line will produce no undesired line breaks. But still need to allow long lines, because sometimes there's no avoiding it.

jsfiddle.net/6brjxo1L

Upvotes: 0

Views: 541

Answers (4)

Kevin Orara
Kevin Orara

Reputation: 187

Try experimenting with textarea attributes.

Lets look at my example. Here I set the cols="50" to narrow out the textarea's width. maxlength="300" to limit the characters to 300. Then used placeholder= "Max 300 characters" to inform users that hey guys there's a limit of 300 characters so choose your words wisely. Then the autocorrect="on" detects incorrect spelling and provides the user with suggested correctly spelled words.

There's a ton of other attributes you can experiment with via the link I provided.

<textarea cols="50" rows="5" maxlength="200" autocorrect="on" placeholder= "Max 300 characters" wrap="hard"></textarea>

Upvotes: 1

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23480

You can try with wrapper div:

.wrapper {
  position: absolute;
  display:inline;
}

.wrapper:before {
  content: '';
  position: absolute;
  top: 1%;
  right: 20%;
  z-index: 1;
  border: 1px solid grey;
  height: 97%;
}
<div class="wrapper">
    <textarea id="input" rows="10" cols="100"></textarea>
</div>

Upvotes: 1

italant
italant

Reputation: 305

Using JS to reduce textarea to 80, find out the width and make a line shift. Then increase the textarea back to 100

const textareaEl = document.querySelector('.editor__textarea')
textareaEl.setAttribute('cols', 80)
const separatorLeft = textareaEl.offsetWidth

const separatorEl = document.querySelector('.editor__separator')
separatorEl.style.left = separatorLeft + 'px'
textareaEl.setAttribute('cols', 100)
.editor {
  width: fit-content;
  padding: 0;
  position: relative;
}

.editor__textarea {
  font-size: 10px;
  padding: 0;
  margin: 0;
}

.editor__separator {
  width: 1px;
  top: 0;
  bottom: 4px;
  background-color: #000;
  position: absolute;
  box-shadow: 2px 0px 5px;
}
<div class="editor">
  <textarea class="editor__textarea" id="input" rows="10" cols="100"></textarea>
  <div class="editor__separator"></div>
</div>

Upvotes: 1

A Haworth
A Haworth

Reputation: 36426

You could just give it a background image using a linear gradient e.g.

textarea {

      background-image: linear-gradient(to right, transparent 0 80%, black 80% 81%, transparent 81% 100%);
    }

Of course set the dimensions as you require, and to give a thicker or thinner line.

Upvotes: 1

Related Questions