jquery - 如何检测对 textarea 的有意义的编辑

Question

我的应用程序允许用户创建和编辑面试问题。

最初，用户会看到一组“标准”问题，每个问题都显示在自己的文本区域中。

允许用户在这些文本区域中编辑/自定义这些“入门”问题。

如果问题被更改（以有意义的方式），该问题将被保存为一个新问题。

但是，无意义的更改不应触发添加“已编辑”类。

我的挑战是我想检测 textarea 何时发生更改，但我不想计算添加的空格或只是单击 textarea 作为值得更新数据库的编辑。

我的文本区域是这样的：

<textarea id="question_1" class="textarea_enabled">{text filled from database}</textarea>

当我的 jquery/javascript 是这样的时候：

$(document).on('keypress','.textarea_enabled',function() {
    var charCount = $(this).val().replace(/\s/g,'').length;
    if(newChar > 1) {
        $(this).addClass('edited');
    }
});

它不起作用，因为长度包括测量数据库中已经存在的文本。

例如，如果问题已经是 30 个字符，那么上面的代码会在第一次击键时添加类，因为它已经大于 1。

或者，我尝试过：

$(document).on('input blur','.textarea_enabled',function() {
    $(this).addClass('edited);
});

但是，当然，没有计算或评估此代码中发生了多少变化。因此，用鼠标点击输入，然后在文本区域外点击就足以触发添加“已编辑”类。

确切地说，我不是在寻找 textarea 中的字符总数（正如许多其他 SO 问题所解决的那样），我也不是试图限制 textarea 中的字符数。

我需要一个检测有意义的编辑的函数。现有问题字符串中的编辑（例如，更正拼写或删除单词）应始终触发“已编辑”类添加。另一方面，“增量”非空格或其他非可视按键、点击进出字段等不应触发添加“已编辑”类。

例如，在问题末尾输入的空格将是无意义的空格。但是，在现有问题的“内部”中输入一个空格来分隔先前输入错误的单词（例如，“thedog”更改为“the dog”）将是一个“有意义的”更改。

我可以将提交的编辑与 SQLite 数据库中存储的值进行比较，但这似乎是一种“昂贵”的方法，并且在更改足以被识别时消除了视觉提示用户的机会（即添加“编辑”类）。

实现这一目标的最佳方法是什么？

Answer 1

以下内容如何：

• 计算多个<textarea>s 的初始字符串长度
• keyup 事件检查 trimmed 字符串与初始长度（不包括前导/尾随空格）并仅设置输入“有意义”新字符或空格的类
• 更新相关<textarea> 的字符串长度以供后续检查

// hash for question lengths
var questionCharCount = {};
// sample questions
var questions = [
  'stuff from database',
  'more stuff from database',
  'quick brown fox'
];

// intialise questions - your DB code goes here
$(document).on('ready', function() {
  for(var i=1; i<=3; i++) {
    id = 'question_' + i; 
    $('#' + id).val(questions[i-1].trim());
    questionCharCount[id] = $('#' + id).val().length;
  }
});

// keyup event to decide on meaningful edit based on trimmed lengths
$(document).on('keyup', '.textarea_enabled', function() {
  var id = $(this).attr('id');
  var newCharCount = $(this).val().trim().length;
  if (newCharCount !== questionCharCount[id]) {
    $(this).addClass('edited');
    questionCharCount[id] = newCharCount;
    console.log('meaningful edit occurred in ' + id);
  }
});

.edited {
    outline: none !important;
    border:1px solid red;
    box-shadow: 0 0 10px #719ECE;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="question_1" class="textarea_enabled"></textarea>
<textarea id="question_2" class="textarea_enabled"></textarea>
<textarea id="question_3" class="textarea_enabled"></textarea>