Question

我想要实现的是，当我输入一个输入值时，textarea值的具体数量也会根据输入值被替换。

F.e：如果我输入一个数字4的输入值，textarea的特定值（在这种情况下是一个数字）也将是4。如果我要从输入中删除一个值，那么该值也将从textarea中删除。

正如您在代码段中看到的，它很糟糕。它只改变一次值。之后，“文本区域”值不会改变。

有人可以帮助我吗？谢谢你的时间

    $('.text1').keyup(function() {
        var recommendationText = $('.textarea');
        var specificString = '4';
        var str = $('.textarea').val().replace(specificString, $(this).val());
        
       recommendationText.val(str);
        specificString = $(this).val();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="text" class="text1">
<textarea rows="4"  class="textarea" cols="50">
This is a textarea of 4 rows.
</textarea>

Answer 1

您的代码存在一些问题。第一个是每次执行keyup时都会重新分配specificString值，因此您需要在事件处理程序之外设置默认值。但是，如果删除该值，它将无法找到它并将其添加到开头。

我个人建议使用基于模板的方法，而不是存储以前的值：

var specificString = '[numRows]';
var recommendationText = $('.textarea').val();
$('.text1').keyup(function() {
  var numRows = $(this).val();
  if (isNaN(parseFloat(numRows)) || !isFinite(numRows) || numRows.length < 1) {
    numRows = 0;
  }
  var str = recommendationText.replace(specificString, numRows);
  $('.textarea').val(str);
}).keyup();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="text" class="text1" value="4">
<textarea rows="4"  class="textarea" cols="50">
This is a textarea of [numRows] rows.
</textarea>

这可以使用适当的模板语言，例如Handlebars或Underscore.js templates，但这太基于意见，无法包含在我的答案中。

Answer 2

以您的方式运行您的代码。只需改变你的代码......！您的代码中存在一些逻辑问题。在specificString方法之外启动keyup()的值，以获得前4个，然后是文本框的值。

var recommendationText = $('.textarea');
var specificString = recommendationText.val().match(/\d+/);
$('.text1').keyup(function() {
if($(this).val() != '' && $.isNumeric($(this).val())) {
    var str = $('.textarea').val().replace(specificString, $(this).val());
   recommendationText.val(str);
   specificString = $(this).val();
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="text" class="text1">
<textarea rows="4"  class="textarea" cols="50">
This is a textarea of 4 rows.
</textarea>

Answer 3

解决方案比您预期的要容易得多。

注意： $ {inputVal}中的$不是jquery，它是模板文字的一部分。不要在那里感到困惑。

＆＃13;

document.getElementById('text1').onkeyup = changeTextArea;

function changeTextArea() {
  let inputVal = document.getElementById('text1').value;
  let text = `This is a textArea of ${inputVal} rows`;
  document.getElementById("textarea").value = text;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="text" id="text1">
<textarea rows="4"  id="textarea" cols="50">
This is a textarea of 4 rows.
</textarea>

＆＃13;

Answer 4

在specificString事件之外声明并初始化keyup()。否则specificString的值将始终为4.

var specificString = '4';

$('.text1').keyup(function() {
        var recommendationText = $('.textarea');
        var str = $('.textarea').val().replace(specificString, $(this).val());            
        recommendationText.val(str);
        specificString = $(this).val();
});

Answer 5

那么你的问题是你替换字符串所以下次你找4时就不存在了。原因是您在循环内部重新定义specificString因此它始终为4而不是用户最后输入的内容。因此，如果你把它移到外面就行了（＆＃34;有点＆＃34;）

如果用户输入与其他单词匹配的内容，您的设计将失败。 EG This，它将替换第一个匹配项，而不是要替换的字符串。或者，如果删除字符串，则不会有任何匹配。

那你能做什么？我会使用原始数据属性并使用它。我会做一些＆＃34;模板＆＃34;所以你知道你要替换的是什么，当用户匹配文本时，不要用替换替换字符串的另一部分。

＆＃13;

$('.text1').keyup(function() {
  var ta = $('.textarea')
  var specificString = /\{4\}/;
  var entry = $(this).val() || "4";
  var str = ta.data("text").replace(specificString, entry);
  ta.val(str);
}).trigger("keyup");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="text" class="text1">
<textarea rows="4" class="textarea" cols="50" data-text="This is a textarea of {4} rows.">
</textarea>

＆＃13;

如何使用输入值自动更改特定文本值？

5 个答案: