Textarea 可编辑，除了来自输入的值

Posted 2023-05-07

技术标签:

【中文标题】Textarea 可编辑，除了来自输入的值【英文标题】：Textarea editable except values from inputs 【发布时间】：2018-11-10 05:00:30 【问题描述】：

我有两个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/

【问题讨论】：

您不能拥有部分可编辑的字段。它要么可编辑，要么不可编辑。如果您想要这种行为，请允许用户在单独的字段中键入注释，然后在提交表单之前组合值。 jsfiddle.net/dreamfighterr/L3n81298 它已经在工作了，但是当我传递一个输入值（不是字符串）时它失败了 ... 然后我禁用 javascript 并删除该文本并破坏您的系统。 【参考方案1】：

更新答案只使用一个textarea

我对您的代码进行了更多尝试，最终得到了这个非常简单的解决方案：

拆分textarea的所有行，将输入值放在第一行（模拟这一行的“只读”）重新加入所有行。

这是一个有效的 sn-p：（参见我的代码中的 cmets）

$(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"]') 简化您的代码以选择所有id 以“text”开头的元素，在#description textarea 上添加readonly 属性，用于合并来自输入元素的文本。

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

工作sn-p：

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

希望对你有帮助！

【讨论】：

您好，请您帮我修改一下代码。我不想要虚线或新行，我只想在不可编辑的内容之后添加额外的字符。请帮帮我【参考方案2】：

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

【讨论】：

但我希望 textarea 内容（从两个输入字段获得）只读，此外我可以在 textarea 中输入额外的内容。等我试试我在等，谢谢【参考方案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>

【讨论】：

我们在这里为您提供帮助：D 例如可以监听keyup事件并检查用户是否点击了回车键其实我在 jquery 或 javascript 方面不是很好，我希望 textarea 字段更实时，比如当我在输入字段中输入任何字符时，它应该传递给 textarea同时，现在我必须单击输入字段 2 以使输入字段值 1 传递给 textarea 当我从输入字段中删除文本时，它不会从文本区域中删除

以上是关于Textarea 可编辑，除了来自输入的值的主要内容，如果未能解决你的问题，请参考以下文章

如何在可编辑的 TextArea 中禁用回车？

contenteditable属性

可编辑DIV 光标位置处理

js在opera下怎样获取可编辑div中的鼠标光标和选中文本

如何使用另一个 textarea 编辑 textarea 值？

javascript实现可编辑样式的文本