0

キーコマンドを使用してテキストエリアでのテキスト入力を有効または無効にする必要がある小さな個人プロジェクトに取り組んでいます。これは、Vi/Vim が挿入とコマンド モードを処理する方法と同様に機能します。

このタスクを実行するエレガントな方法を理解できないようです。テキストエリアを無効に設定すると、ユーザーはテキスト内でカーソル キャレットを移動できなくなります。keydown イベントを設定return falseすると、フィールドを無効にすることができますが、他のロジックに到達する前に即座に false が返されるため、再度有効にすることはできません。

の前に何らかのロジックがある場合return false、テキストエリアは文字入力を受け取ります。この入力を受け入れ、挿入モードに設定されていない場合は即座に元に戻すバージョンを試してみましたが、これは扱いにくく、価値がある以上の問題を引き起こしました (さらに、実際には瞬時ではありません...)

4

3 に答える 3

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 に答える
1

私はこれをいじりました。単純なデモです。d を押すとフィールドが無効になり、e を押すとフィールドが有効になります。有効にすると、他の文字を入力できます。 http://jsfiddle.net/gKDDh/1/

これを試して、テキストエリアと同じテキストを含む隠しフィールドを設定してください。テキストエリアを実際に無効にしないでください。背景色またはテキストの色を変更して、ユーザーが無効かどうかを区別できるようにしてください。次に、このようにロジックをセットアップします。

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 に答える