Question

我一直致力于一个小型的个人项目，要求我能够通过键盘命令在textarea中启用和禁用文本输入。它的功能类似于Vi / Vim处理插入和命令模式的方式。

我似乎无法找到执行此任务的优雅方式。将textarea设置为disabled意味着用户无法再通过文本移动其光标插入符号。将keydown事件设置为return false可用于禁用该字段，但显然无法重新启用它，因为它会在到达任何其他逻辑之前立即返回false。

如果return false之前有任何逻辑，则textarea接受字符输入。我曾经尝试过一个接受此输入的版本，如果它没有设置为插入模式，它会立即恢复它，但这会让人觉得笨拙而且引起的问题比它的价值更多（加上它不是真的......）

Answer 1

我做了一个小提琴，只是一个简单的演示，点击d禁用该字段并点击e启用它。启用时可以输入其他字符。 http://jsfiddle.net/gKDDh/1/

试试这个，设置一个隐藏字段，其中包含与textarea相同的文本。现在永远不会实际禁用textarea，只需更改背景颜色或文本颜色，以便用户可以区分禁用和不禁用。然后像这样设置你的逻辑。

onkeydown {
  if (state == disabled and hidden field value <> textarea value) {
    copy value from hidden field to textarea
  }
  else if (state == enabled) {
    copy value from textarea to hidden field
  }

基本上我们正在做的是不断跟踪值应该是什么，并且仅在启用状态时允许更改。

Answer 2

我对Vi / Vim不熟悉，但我认为你正在努力实现这样的目标： http://jsfiddle.net/FSjTa/

$('#text').keydown(function() {
    if ($(this).hasClass('command-mode')) {
        return false;            
    }
});
$('#btn-toggle').click(function() {
    $text = $('#text');
    if ($text.hasClass('input-mode')) {
        $text.removeClass('input-mode');
        $text.addClass('command-mode');
        $(this).html('command mode');
    } else {
        $text.removeClass('command-mode');
        $text.addClass('input-mode');
        $(this).html('input mode');
    }
});

我认为代码应该解释自己。如果没有，请随时询问！

Answer 3

使用JQuery：

var txt = $("#txt");
txt.on("keyup",function(e){
  //Hit shift to disable
  if (e.keyCode === 16){
    $(this).attr("disabled","disabled");
  } 
}); 

$("body").on("keyup",function(e){
  //Hit enter to enable
  if (e.keyCode === 13){
    txt.removeAttr("disabled","");
  } 
});

这是一个演示：

http://jsfiddle.net/JMyTY/1/

禁用并重新启用用户输入而不离开textarea

3 个答案: