Question

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

最初，用户会看到一组＆＃34;标准＆＃34;问题，每个问题都显示在自己的textarea中。

允许用户编辑/自定义这些＆＃34; starter＆＃34;这些文本中的问题。

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

但是，无意义的更改不应触发添加＆＃34;编辑的＆＃34;类。

我的挑战是我想要检测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);
});

但当然，没有计算或评估此代码中有多少变化。因此，使用鼠标单击输入然后单击textarea外部就足以触发添加＆＃34;编辑的＆＃34;类。

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

我需要一个能够检测有意义编辑的功能。现有问题字符串中的编辑（例如，纠正拼写或删除单词）应始终触发＆＃34;编辑的＆＃34;加班。另一方面＆＃34;增量＆＃34;非空格或其他非可视按键，点击进出该字段等，不应触发添加＆＃34;编辑过的＆＃34;类。

例如，在问题末尾输入的空格将是一个无意义的空间。但是，一个空间进入＆＃34;内部＆＃34;现有问题将以前输入错误的词语分开（例如，＆＃34;狗狗＆＃34;改为＆＃34;狗狗＃34;）将是一个有意义的＆＃34;变化

我可以将提交的编辑与SQLite数据库中存储的值进行比较，但这看起来像是一个“昂贵的”＃34;当变化足以被识别时（即添加＆＃34;编辑的＆＃34;类），路由并消除了在视觉上提示用户的机会。

实现这一目标的最佳途径是什么？

Answer 1

以下内容如何：

计算多个<textarea> s
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>

jquery - 如何检测textarea

1 个答案: