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

Question

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

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

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

如果问题发生变化(以有意义的方式)，该问题将另存为新问题。

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

我的挑战是我想检测 textarea 何时更改，但我不想将添加空格或只是单击 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);
});

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

准确地说，我不是在寻找文本区域中的字符总数(正如许多其他 SO 问题所解决的那样)，也不是试图限制文本区域中的字符数。

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

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

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

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

Answer 1

以下情况如何:

• 计算多个 <textarea> 的初始字符串长度小号
• keyup事件检查 trim针对初始长度的 med 字符串(不包括前导/尾随空格)并且仅设置输入“有意义的”新字符或空格的类
• 更新相关的字符串长度<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>