JSFiddle - React, Tailwind, and code Playground

by sukobuto

HTML

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<h1>テキストボックスでの Enter キー入力にバインド</h1>
<form><!-- Enter によるフォーカス移動を使う場合は form タグで囲む-->
    
    <label>
        <div>普通に Enter で実行</div>
        <input type="text" data-bind="value: single_text, enterKey: search"/>
    </label>
    
    <label>
        <div>Enter で次のテキストボックスへ移動</div>
        <input type="text" data-bind="value: single_text, enterKey: { moveFocus: true }"/>
    </label>
    
    <label>
        <div>Enter で移動 / Shift + Enter で実行</div>
        <input type="text" data-bind="value: single_text, enterKey: { moveFocus: true, withShift: post }"/>
    </label>
    
    <label>
        <div>Ctrl + Enter で実行</div>
        <input type="text" data-bind="value: single_text, enterKey: { withCtrl: post }"/>
    </label>
    
    <label>
        <div>Ctrl + Shift + Enter で実行</div>
        <input type="text" data-bind="value: single_text, enterKey: { withCtrlShift: post }"/>
    </label>
</form>

CSS

label { display: block; }
label > div { display: inline-block; width: 280px; }

JavaScript

/**
     * Custom binding [ enterKey ] (Static)
     * Enterキー押下に対する振る舞いをバインドする
     * jQuery に依存
     *
     * binding-type: function/object
     * binding-object: {
	 * 	command:		[default:function] Enterキー押下で呼び出されるコールバック関数を指定する。
	 * 	event:			Enterキー押下イベントの種別（'keydown', 'keyup', 'keypress'）。
	 * 					デフォルトは 'keypress'。
	 * 	acceptInput:	true=テキストボックスに対して改行の入力を許可する。
	 * 					デフォルトは textarea なら true, それ以外なら false。
	 * 	moveFocus:		true=Enterキー押下によるフォーカス遷移を実現する。
	 * 	submitForm:		true=Enterキー押下によるフォームの送信を許可する。
	 * 					デフォルトは false。
	 * 	withShift:		Shift + Enter 押下で呼び出されるコールバック関数を指定する。
	 * 	withCtrl:		Ctrl + Enter 押下で呼び出されるコールバック関数を指定する。
	 * 	withCtrlShift:	Ctrl + Shift + Enter 押下で呼び出されるコールバック関数を指定する。
	 * 	bubbling:		false=バブリングを停止する
	 * }
     */
ko.bindingHandlers['enterKey'] = {
    init : function(element, valueAccessor, allBindingsAccessor) {
        var value = ko.unwrap(valueAccessor());
        var elm = $(element);
        var isTextarea = elm.is('textarea');
        var isTextbox = elm.is('input[type="text"]') || elm.is('input[type="password"]');
        var dummyCallback = function() {};
        var config = ko.utils.extend({
            event: 'keypress',
            acceptInput: elm.is('textarea') ? true : false,
            moveFocus: false,
            submitForm: false,
            command: dummyCallback,
            withShift: dummyCallback,
            withCtrl: dummyCallback,
            withCtrlShift: dummyCallback,
            bubbling: true
        }, (typeof value == "function" ? { command: value } : value));
        var text = allBindingsAccessor().value || false;
        if (text) text = ko.isObservable(text) ? text : false;
        $(element)[config.event](function(e) {
            if ((e.keyCode ? e.keyCode : e.which ? e.which : e.charCode) == 13) {
                if (config.bubbling === false) {
                    if (e.stopPropagation) e.stopPropagation();
                    else e.cancelBubble = true;
                }
          ...