0

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

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

如果在 之前有任何逻辑，return false则 textarea 接受字符输入。我尝试了一个版本，它可以接受这个输入，如果它没有设置为插入模式，它会立即恢复它，但这感觉很笨拙，并且导致的问题比它的价值要多（而且它不是真正的即时......）

4

3 回答 3

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
  }

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

于 2012-08-17T20:48:06.830 回答
1

我不熟悉 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');
    }
});

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

于 2012-08-17T20:55:02.697 回答
1

使用 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/

于 2012-08-17T20:55:13.377 回答