CODEWITHSUNDEEP
htmlcssdjango
Greg
Greg

Reputation: 1989

Dynamic Underlining

Let's say I have the following section on a form

Form Section:

Data:_____________________________________________________________________________ __________________________________________________________________________________ __________________________________________________________________________________ __________________________________________________________________________________

and I want to be able to insert {{ data }} into the section while keeping every line (even if it's unused). I'm doing this for work to replicate an old form. This form has to be identical and that's why I can't simply do something like:

<u>{{ data }}<u>

Thanks in advance for any and all help!

Upvotes: 2

Views: 316

Answers (2)

Basic
Basic

Reputation: 26766

There seem to be a couple of options here;

  • Hacky: Use multiple text inputs. Style them to have a solid bottom border (as the underline) and use a bit of javascript to handle moving between them on word wrap/arrow key movement. Downside: you'll miss something like handling text readers properly, obscure keyboard shortcuts, etc... Also, while pasting is fairly easy, copying would be a pain.

  • Use a textarea with a background-image with the lines. This relies on you locking down the font size/line spacing to look right

  • Html5: look into using contenteditable attribute. you should be able to replicate the appearance fairly easily using css and divs/spans. Then make the right one editable

Upvotes: 2

user815437
user815437

Reputation:

This post might be helpful. How to underline blank space in CSS?

In their example, you would put your template code in the first span.

Upvotes: 1

Related Questions