Textarea可编辑，但输入值除外

Question

我有两个input字段和一个textarea。当我在input字段中输入内容时，.val()会自动添加到textarea。

它工作正常，但我希望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

更新回答
仅使用一个textarea

我使用你的代码玩了一些，最后得到了这个非常简单的解决方案：

• 拆分textarea，
的所有行
• 将输入值放在第一行（模拟＆＃34;只读＆＃34;此行）
• 加入所有行。

这是一个工作片段：
（见我的代码中的评论）

＆＃13;

＆＃13;

$(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);

});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我认为它可以更容易！

希望它有所帮助。

⋅ ⋅ ⋅

旧答案
添加新的textarea

因为你没有＆＃34;部分只读＆＃34;元素，我建议你改变：

• 添加textarea，
的新id="text3"元素
• 使用$('[id^="text"]')简化您的代码，以选择ID以“text”开头的所有元素，
• 在readonly #description上添加textarea属性，用于合并输入元素中的文字。

这样，#description中的结果内容可供选择/复制/粘贴，但不可修改。

工作片段：

＆＃13;

＆＃13;

$(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);

});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

希望它有所帮助！

Answer 2

你需要跟踪两个输入值，而不是直接将它们插入到文本区域，你将创建两个字符串，每次用户更改任何输入时，将输入文件附加到其中一个字符串然后追加该字符串到您的文本区域，请参阅下面的示例，因为您可以看到我使用模糊事件而不是更改来获取已更改输入的全部值

查看完整示例以了解解决方案

＆＃13;

＆＃13;

$(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);

});

＆＃13;

textarea {

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

$(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>