Question

我有textarea用户需要以特定方式输入内容，但textarea中显示的文字需要与他输入的文字不同。所以基本上我需要一些按下每次按键时要调用的功能。我试图用onkeydown和onkeyup来做，但我没有成功。

我将举一个例子来更好地解释它。 “字母按下”将是用户实际输入的文本，“字母显示”是textarea中显示的字母。

字母紧迫：“你好，请你帮我一件事？这不是那么难” 字母 - 显示：“你好，我不想要你的帮助？这不是那么难”

所以，我想要的是当我按下“Hello”之后的第二个“逗号”时，我的文本开始显示textarea中的预先编写的文本，这与我输入的文本不同。

当我使用“问号”时，我想再次开始显示真实文本。第二个“逗号”和“问号”之间的所有内容都必须存储到我将使用的变量中。

var hiddenText = ", i dont want your help";

更新：我接近使其工作，但目前它的工作有点“慢”。首先显示输入的字母，输入第二个字母后，第一个字母将被过滤。我需要它是即时的，所以在textarea中显示字母之前调用该函数。我通过将字符串放入数组，然后将当前字母与预编写字符串中的相同索引字母进行比较来管理它。如果它是相同的，请保留它，如果它不同，请从预先编写的字符串中获取字母。

function filter() {

// $ufText is unfiltered text which is typed in.
// $psTextArray is pre-scripted text.
// $filtered text is, well, filtered text.

let $ufTextArray = [];
let $psTextArray = [];
let $filteredText = "";

let $ufText = $("#txt").val();
$ufTextArray = $ufText.split('');
console.log($ufTextArray);

let $psText = "Hello, can you please help me with something?Hello, can you please help me with something?Hello, can you please help me with something?Hello, can you please help me with something?Hello, can you please help me with something?Hello, can you please help me with something?Hello, can you please help me with something?Hello, can you please help me with something?Hello, can you please help me with something?Hello, can you please help me with something?Hello, can you please help me with something?Hello, can you please help me with something?";
$psTextArray = $psText.split('');

for (let i=0; i<$ufText.length ; i++) {

   if ($ufTextArray[i] != $psTextArray[i]) {
 
      $filteredText = $filteredText + $psTextArray[i];
      $("#txt").val($filteredText);


  } else {
   
      $filteredText = $filteredText + $ufTextArray[i];
      $("#txt").val($filteredText);   

  }
 }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<textarea id="txt" cols="80" rows="2" onkeydown="filter()"></textarea>
  
</body>
</html>

Answer 1

假设你有textarea

<textarea rows="4" cols="50" id="testfield1"></textarea>

使用jQuery，您可以使用

修改文本区域的值

$(document).ready(function() {
    $('#testfield1').on('keyup paste', function() {
        $('#testfield1').val("some value");
    });
});

让我们打破这个：

$(document).ready(function() { });

这是Document ready函数的jQuery简写;这意味着脚本在加载文档后运行。

中的所有代码

function(){}

部分在文档加载后执行

$('#testfield1').on('keyup paste', function() { });

此函数使用jQuery选择器语法从DOM中获取textarea。它为“keyup”和“paste”事件分配一个事件监听器。现在，只要其中一个动作发生，就会执行此函数中的所有内容。

我将由你来实现你想要textarea做什么的具体细节，但它应该在这个匿名函数中发生。我在这里的示例simple使用选择器和

在事件触发时将textarea的值设置为“某个值”

val()

功能

在此处查看jsfiddle link

键入时的JavaScript文本操作？

1 个答案: