CODEWITHSUNDEEP
javascripthtmlcsstextinput
bryan
bryan

Reputation: 9389

Combine multiple text input box's

So I have 3 text input areas. The reason for this because I need a black line separating each line of text.

Black lines separating each line

I need to figure out a way to make these text box's feel as one huge text area.

i.e. - As you type it moves to the next line when there is no more space left, when you delete text it push's it back to the previous line if needed.

Does anyone know any work arounds or ways I can achieve this?

I basically need to make a box that people can type in that looks exactly like the picture, but people can only type and edit in the blue area. The text "Label of what people will type." can NOT be changed, edited, deleted, etc.

Upvotes: 0

Views: 398

Answers (3)

some
some

Reputation: 49612

I think using many textareas or input fields are the wrong way to go.

Below you find an attempt to satisfy the indent, by adding spaces at the beginning if it doesn't exists. It also adds a <ul> element with many <li> elements to allow you to have line under the rows. It also scrolls the background if the textarea is filled with too much text.

Tested in Chrome30, FF25 and IE10 and intended as a proof of concept. If you are going to implement this, you should probably dynamically add as many <li> elements as you need. And the events should be bound properly.

jsfiddle

<!doctype html>
<html>
  <head>
    <style>
      div.mytext {
        position:relative;
        overflow:hidden;
        width:400px;
        height:200px;
      }
      div.mytext > ul {
        position:absolute;
        top:5px;
        left:2px;
        font-weight:bold;
        color:#f00;
        list-style:none;
        width:100%;
        padding:0;
        margin:0;
        z-index:0;
      }

      div.mytext >ul> li {
        border-bottom:1px solid #000;
        width:100%;
        height:19px;
      }

      div.mytext > ul,
      div.mytext > textarea {
        font-size:12px;
        line-height:20px;
        font-family:courier;
        height:100%;
        width:100%;
        overflow:hidden;
        max-width:100%;
        max-height:100%;
        -moz-box-sizing: border-box;
         box-sizing: border-box;
      }

      div.mytext > textarea {
        position:relative;
        background:transparent;
      }

    </style>
    <script>
      function update(area) {
        if (!area.value.match(/^[ ]{8}/)) {
          area.value = '        ' +  area.value.replace(/^\s+/,"");
        }
        if (area.selectionStart < 8) {
          area.selectionStart = 8;
        }
      }

      function scroll(area) {
        area.parentElement.firstElementChild.scrollTop = area.scrollTop;
      }
    </script>
  </head>
  <body>
    <div class='mytext'>
      <ul>
          <li>Label:</li>
          <li>&nbsp;</li>
          <li>&nbsp;</li>
          <li>&nbsp;</li>
          <li>&nbsp;</li>
          <li>&nbsp;</li>
          <li>&nbsp;</li>
          <li>&nbsp;</li>
          <li>&nbsp;</li>
          <li>&nbsp;</li>
          <li>&nbsp;</li>
          <li>&nbsp;</li>
          <li>&nbsp;</li>
          <li>&nbsp;</li>
          <li>&nbsp;</li>
      </ul>
      <textarea onkeydown='update(this)' onscroll='scroll(this)'></textarea>
    </div>
  </body>
</html>

Explanation:

  • Create a div that has position:relative to set a reference for the child elements position.
  • Create a ul that has position:absolute, with as many li-elements as necesary. The label goes into the first one, and the others has a no-breaking-space to allow styling.
  • When a key i pressed a function is called that tests with a regexp if the value of the textarea starts with a certain number of spaces, and adds them if they are missing.
  • If the textarea is scrolled another function is called that will scroll the background too.

Disclaimer: This is only a proof of concept and needs more work if it is going to be used in production.

Upvotes: 0

Felipe Miosso
Felipe Miosso

Reputation: 7339

If you are using 3 texboxes just for the lines, instead of that, why don't you use a textarea with an background-image?

Take a look at this: jsfiddle.net/felipemiosso/Rh82q/

updated: jsfiddle.net/felipemiosso/Rh82q/4/

Upvotes: 0

Pixel Reaper
Pixel Reaper

Reputation: 263

You can use pure javascript like this:

<script type="text/javascript">
function ValidatePassKey(tb) {
  if (tb.TextLength >= 4)
    document.getElementById(tb.id + 1).focus();
  }
  if (tb.TextLength == 0 & tb.id !== 1){
       document.getElementById(tb.id - 1).focus();
  }
}
</script>

<input id="1" type="text" onchange="ValidatePassKey(this)" maxlength="4">
<input id="2" type="text" onchange="ValidatePassKey(this)" maxlength="4">
<input id="3" type="text" onchange="ValidatePassKey(this)" maxlength="4">
<input id="4" type="text" maxlength="4">

This just moves your cursor to the next text box once the text box you are currently in becomes full.

Upvotes: 1

Related Questions