Объединить несколько текстовых полей ввода

Итак, у меня есть 3 области ввода текста. Причина этого в том, что мне нужна черная линия, разделяющая каждую строку текста.Объединить несколько текстовых полей ввода

Black lines separating each line

Мне нужно, чтобы выяснить способ сделать эти ощущения текстового поля как один огромный текстовой области.

i.e. - Когда вы вводите его, он перемещается на следующую строку, когда больше нет свободного места, когда вы удаляете текст, при необходимости нажмите на предыдущую строку.

Кто-нибудь знает какие-либо работы или способы, которыми я могу это достичь?

мне в принципе нужно сделать окно, что люди могут набрать в том, что выглядит точно так же, как на картинке, но люди могут только вводить и редактировать в синей области. Текст «Обозначение того, что люди будут печатать». НЕ может быть изменен, редактировать, удалять и т.д.

источник

2013-11-07 bryan

Неправильный способ делать вещи. Используйте текстовое поле. Любая причина, по которой вы находите сотни входов лучше, чем одно текстовое поле? –

Область текста обычно квадратная. Из приведенного выше рисунка мне нужно, чтобы область текста была отступом в первой строке из-за метки. @ RokoC.Buljan – bryan

@bryan: вы собираетесь потратить несколько дней на выполнение каждого поведения с вставляемым текстом, удалением, перемещением, вырезанием и вставкой ... Я говорю, что это неправильно на стольких уровнях. Вы пытаетесь подражать бумажной форме или что? – some

Вы можете использовать чистый JavaScript, как это:

<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">

Это просто перемещает курсор к следующему текстовое поле, как только текстовое поле вы в настоящее время переполняется ,

источник

2013-11-07 15:38:23

Спасибо за идею! Но что, если я решил удалить какой-либо текст, скажем, id2, когда есть текст на id1 и id3? Мне нужен текст из id3, чтобы перейти к предыдущей строке. – bryan

@bryan - добавьте другое условие, если длина равна 0, а вход не ID 1, фокус на предыдущем. – tymeJV

@tymeJV фокусировка - это одно, перемещение текста в предыдущую строку при удалении или нажатии текста вперед на следующую строку с добавленным текстом - это целый другой монстр, который я пытаюсь решить. – bryan

Если вы используете 3 texboxes только для строк, вместо этого, почему бы вам не использовать текстовую область с фоновым изображением?

Взгляните на это: jsfiddle.net/felipemiosso/Rh82q/

обновленный: jsfiddle.net/felipemiosso/Rh82q/4/

источник

2013-11-07 15:52:52

Я думал об этом, но что мне делать с необходимым отступом на первой строке с текстом? @FelipeMiosso – bryan

Если отступ только для первой строки. Добавьте в текстовое поле. Я обновил свою скрипку. –

Это нечто вроде дурака. Если код каким-то образом будет удален, тогда мой текст перейдет по метке, если я даже смогу понять, как получить ярлык. Мне нужно подражать изображению выше. – bryan

Я думаю, используя множество текстовых областей или полей ввода являются неправильный путь.

Ниже вы найдете попытку удовлетворить отступ, добавив пробелы в начале, если оно не существует. Он также добавляет элемент <ul> с множеством элементов <li>, чтобы вы могли иметь строку под строками. Он также прокручивает фон, если текстовое поле заполнено слишком большим текстом.

Протестировано в Chrome30, FF25 и IE10 и предназначено как доказательство концепции. Если вы собираетесь реализовать это, вы должны, вероятно, динамически добавить столько элементов <li>, сколько вам нужно. И события должны быть связаны должным образом.

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>

Объяснение:

Создайте DIV, который имеет положение: относительно установить ссылку на положение дочерних элементов.
Создайте уль, которая имеет положение: абсолютное, с таким количеством литий-элементов, которое необходимо. Ярлык входит в первую, а у других нет свободного пространства, чтобы позволить стиль.
Когда клавиша i нажата, функция называется так, что тесты с регулярным выражением, если значение textarea начинается с определенного количества пробелов и добавляет их, если они отсутствуют.
Если прокручивается текстовая область, вызывается другая функция, которая также прокручивает фон.

Отказ от ответственности: Это только доказательство концепции и требует больше работы, если она будет использоваться в производстве.

источник

2013-11-07 16:26:57 some

Это, безусловно, самое близкое к тому, что я ищу, спасибо!Это определенно нужно много играть, но это должно помочь мне проникнуть хотя бы в солидное направление. Любые подсказки о том, чтобы этот курсор никогда не переходил на этикетку? – bryan

@bryan. 'element.selectionStart' (см. обновленный код здесь и на jsfiddle). – some

Объединить несколько текстовых полей ввода

ответ

Смежные вопросы