Редактируемая текстовая область кроме значений из входных

Question

У меня есть два input поля и одно textarea.Когда я что-то печатаю в полях input, их .val() автоматически добавляются в textarea.

Все работает нормально, но я хочу, чтобы эти значения в textarea были доступны только для чтения.

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

$(function() {
  var text1 = $('#text1');
  var text2 = $('#text2');
  var description = $('#description');

  function onChange() {
    description.val("Chesis No:  " + text1.val() + ", Engine No:  " + text2.val());

    var base = description.val();
    var regex = new RegExp("^" + base, "i");
    $('#description').on("input", function(ev) {
      var query = $(this).val();
      if (!regex.test(query)) {
        //ev.preventDefault();
        $(this).val(base);
      }
    });
  }

  $('#text1')
    .change(onChange)
    .keyup(onChange);

  $('#text2')
    .change(onChange)
    .keyup(onChange);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text1" placeholder="Chassis No" class="form-control" />
<input type="text" id="text2" placeholder="Engine No " class="form-control" />
<textarea rows="4" cols="50" name="postContent" id="description"></textarea>

https://jsfiddle.net/dreamfighterr/x4v0sxt8/

Answer 1

$(function() {
  var text1 = $('#text1');
  var text2 = $('#text2');
  var description = $('#description');

  function onChange() {
    description.val("Chesis No:  " + text1.val() + ", Engine No:  " + text2.val());

    var base = description.val();
    var regex = new RegExp("^" + base, "i");
    $('#description').on("input", function(ev) {
      var query = $(this).val();
      
    });
  }

  $('#text1')
    .change(onChange)
    .keyup(onChange);

  $('#text2')
    .change(onChange)
    .keyup(onChange);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text1" placeholder="Chassis No" class="form-control" />
<input type="text" id="text2" placeholder="Engine No " class="form-control" />
<textarea rows="4" cols="50" name="postContent" id="description"></textarea>

Answer 2

Обновленный ответ
Использование только одного textarea

Я немного поиграл с вашим кодом и в итоге получил это действительно простое решение:

• Разделить все строки textarea,
• Поместить значения входов в первую строку (Это имитирует «только чтение» для этой строки)
• Соедините все строки.

Вот рабочий фрагмент:
(см. Комментарии в моем коде)

$(function() {
  var text1 = $('#text1');
  var text2 = $('#text2');
  var description = $('#description');

  // TAKIT: Changed all in this function
  function onChange() {
    var desc = description.val().split('\n');
    
    // TAKIT: Modified here
    var texts = []; // TAKIT: Added an array to make it easier
    if (text1.val())  texts.push("Chesis No: " + text1.val());
    if (text2.val())  texts.push("Engine No: " + text2.val());
    desc[0] = texts.join(', ');
    
    if (desc.length == 1) desc[1] = '';
    description.val(desc.join('\n'));
  }

  // TAKIT: Suggestion to simplify
  $('.form-control').on('keyup change', onChange);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text1" placeholder="Chassis No" class="form-control" />
<input type="text" id="text2" placeholder="Engine No" class="form-control" />
<br><br>
<textarea rows="6" cols="50" name="postContent" id="description" class="form-control"></textarea>

Я думаю, что это не может быть проще!

Надеюсь, это поможет.

⋅ ⋅ ⋅

---

Старый ответ
Добавление нового textarea

Поскольку у вас не может быть элемента «только для чтения»,Я предлагаю вам вместо этого:

• Добавить новый textarea элемент, который id="text3",
• Упростите ваш код, используя $('[id^="text"]'), чтобы выбрать все элементы, идентификатор которых начинается с «text ”,
• Добавить readonly атрибут #description textarea, который объединяет текст из элементов ввода.

Таким образом, полученное содержимое в #descriptionбудет доступен для выбора / копирования / вставки, но не может быть изменен.

Рабочий фрагмент:

$(function() {
  var text1 = $('#text1');
  var text2 = $('#text2');
  var text3 = $('#text3'); // TAKIT: Added
  var description = $('#description');

  function onChange() {
    description.val("Chesis No:  " + text1.val() + ", Engine No:  " + text2.val() + '\n' + text3.val()); // TAKIT: Added

    var base = description.val();
    var regex = new RegExp("^" + base, "i");
    $('#description').on("input", function(ev) {
      var query = $(this).val();
      if (!regex.test(query)) {
        //ev.preventDefault();
        $(this).val(base);
      }
    });
  }

  // TAKIT: Suggestion to simplify
  $('[id^="text"]')
    .change(onChange)
    .keyup(onChange);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text1" placeholder="Chassis No" class="form-control" />
<br>
<input type="text" id="text2" placeholder="Engine No " class="form-control" />
<br>
<textarea id="text3" placeholder="Comments" class="form-control"></textarea>
<br><br>
<textarea rows="4" cols="50" name="postContent" id="description" readonly></textarea>

Надеюсь, это поможет!

Answer 3

Вам необходимо отслеживать значение двух входных данных и вместо прямой вставки их в текстовую область, вы создадите две строки, и каждый раз, когда пользователь изменяет любые входные данные, добавляется входной файл, одна из строк, а затем добавляется эта строка.к вашей текстовой области, см. пример ниже, поскольку вы можете видеть, что я использую событие blur вместо change , чтобы получить полное значение измененного ввода

см.полный пример, чтобы понять решение

$(function() {
  var firstString ='';
  var secondString = '';
  var text1 = $('#text1');
  var text2 = $('#text2');
  var description = $('#description');

  function onChange() {
    description.val("Chesis No:  " + text1.val() + ", Engine No:  " + text2.val());

    var base = description.val();
    var regex = new RegExp("^" + base, "i");
    $('#description').on("input", function(ev) {
      var query = $(this).val();
      if (!regex.test(query)) {
        //ev.preventDefault();
        $(this).val(base);
      }
    });
  }
function ontext1Blur(){
  firstString+=text1.val()
 description.val("Chesis No:  " + firstString + ", Engine No:  " + text2.val());
 var base = description.val();
    var regex = new RegExp("^" + base, "i");
    $('#description').on("input", function(ev) {
      var query = $(this).val();
      if (!regex.test(query)) {
        //ev.preventDefault();
        $(this).val(base);
      }
    });
}
function ontext2Blur(){
  secondString+=text2.val()
 description.val("Chesis No:  " + firstString + ", Engine No:  " + secondString);
 var base = description.val();
    var regex = new RegExp("^" + base, "i");
    $('#description').on("input", function(ev) {
      var query = $(this).val();
      if (!regex.test(query)) {
        //ev.preventDefault();
        $(this).val(base);
      }
    });
}
  $('#text1')
    .blur(ontext1Blur)

  $('#text2')
    .blur(ontext2Blur);

});

textarea {

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text1" placeholder="Chassis No" class="form-control" />
<input type="text" id="text2" placeholder="Engine No " class="form-control" />
<textarea  rows="4" cols="50" name="postContent" id="description"></textarea>