サポート » プラグイン » [Trust Form]管理画面で編集するとき、入力メソッド(カーソル)の動きが変

  • 解決済 sonic65

    (@sonic65)


    Trust Formを管理画面で編集するとき、入力メソッド(カーソル)の動きがおかしな動きになります。
    すでに作成してあるフォームを編集するときに、例えば管理者宛メールの件名などを変えたいときに、テキストの先頭や途中にカーソルを持ってきてから入力するとカーソルがそのテキストの一番最後に勝手に移動してしまいます。
    Windows IE11、Mac Safari、Chromeなどで確認をとりました。

    全部消して初めから入力や別テキストエディタで入力してコピー&ペーストで対処しています。
    なにかヒントでもあればと思い投稿いたしました。
    よろしくお願いします。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • トピック投稿者 sonic65

    (@sonic65)

    調べたところ、フォームの入力文字数をカウントするjQueryプラグイン「Textchange」
    http://zurb.com/playground/jquery-text-change-custom-event
    を使っていて、それを「add-form.js」で設定しているようです。
    そしてカーソルの動きがおかしいのはそれの影響の様子です。

    テストでadd-form.jsの421行目から423行目あたりまでをコメントアウトするとマウスカーソルの位置が変わる現象は改善されます。

    //テキストボックスへの入力値をvalueに反映
    a("input[type=text]").bind("textchange", function(){
    	a(this).attr('value', a(this).val());
    });

    ここのスクリプトをコメントアウトするとどんな影響があるのか、ちょっと追えきれていないです。
    *なんか意味がないスクリプトのような気がするんですが、どうなんでしょうか?

    また、ここをコメントアウトしてもプラグインをバージョンアップするとまた元に戻ってしまうので、remove_actionして、別のJSファイルを読み込ませればと思ったのですが、trust-form.phpファイル内のTrust_Formクラス内で、

    add_action( 'admin_enqueue_scripts', array( &$this, 'admin_javascript' ) );

    とadd_actionをしています。

    それで、Trust_Formクラスは、変数に代入せずに

    new Trust_Form();

    としています。
    変数に代入していない場合は、これをremove_actionするのは無理でしょうか?
    なにか他に方法があるようでしたらご教授お願いいたします。

    モデレーター jim912

    (@jim912)

    ここのスクリプトをコメントアウトするとどんな影響があるのか、ちょっと追えきれていないです。
    *なんか意味がないスクリプトのような気がするんですが、どうなんでしょうか?

    これは、作者さんに聞いてみないとなんともですね。。

    trust-form.phpファイル内のTrust_Formクラス内で、

    add_action( ‘admin_enqueue_scripts’, array( &$this, ‘admin_javascript’ ) );

    とadd_actionをしています。

    それで、Trust_Formクラスは、変数に代入せずに

    new Trust_Form();

    としています。
    変数に代入していない場合は、これをremove_actionするのは無理でしょうか?

    こちらも難しいと思います。Trust Form は、GitHub でソースコードを公開されているので、そちらでプルリクエストをしていただくと、取り込んでもらえる可能性はあります。

    https://github.com/horike37/Trust-Form

    トピック投稿者 sonic65

    (@sonic65)

    ありがとうございます。
    そうですね、JSの件は作者さんに聞いた方が早いかもですね。
    WP公式プラグインのページにsuportフォーラムがあるようなのでそちらで質問してみます。

    インスタンスの変数代入含めて、GitHubでプルリクエストしてみるのもいいかもしれませんね。

    こちらの質問は解決ということでCloseいたします。

    どうも作者です!

    JSの件ですが、結論から言うとこれは必要な処理です。

    textchangeのjQueryプラグインですが、これは文字数をカウントするものではなくて、テキストを入力したタイミングで登録したイベントを発火されるためのプラグインです。

    具体的にこの処理で何をしてるかというと、管理画面から「フォーム上に表示するテキスト」やフォームの要素のタイトルをユーザが入力したタイミングでその要素のvalue属性に動的に設置しています。そうしないとフォームの設定情報をうまくDBに保存ができなくてこのような処理にしています。

    トピック投稿者 sonic65

    (@sonic65)

    作者様!
    直接のお返事ありがとうございます!
    add-form.jsの420行目〜の部分

    //テキストボックスへの入力値をvalueに反映
    	a("input[type=text]").bind("textchange", function(){
    		a(this).attr('value', a(this).val());
    	});

    をコメントアウトしたい理由としては、管理者宛メールボックス内の件名を編集するときにカーソルをテキストの先頭や途中に持って行き、そこで文字を入力(keydown)するとカーソルが文字列の最後に勝手に移動してしまうケースがありまして、いろいろ調べたところここのイベントを削除すると解決するようなのです。

    それで、ここの命令をコメントアウトしても、Trust Formのフォーム要素の編集ができるので、この処理はどこで必要なのかなと疑問に思った次第であります。

    それで、add_form.jsの132行目あたりに以下のような処理があるので、こちらが動いてフォーム要素のタイトルなどちゃんと反映しているのかなと思っています。

    //各要素のタイトルを編集するためのクリックイベント
    	a(".setting-element-title > div.subject > span.content, .setting-element-title > div.submessage > span.content").live("click", function(){
    		if (!a(this).children("input").length) {
    			a(this).removeClass('subject-hover');
    			a(this).html(a('<input>',{type:'text',val:a(this).html()}));
    			a(this).children("input").focus().select().blur(function(){
    				a(this).parent().html(a(this).val());
    	//確認画面へも要素を反映(パフォーマンスが悪くなれば、アルゴリズムを変える)
    				addTrustForm.asyncForm();
    			});
    		}
    	});

    自分はそれほどJavaScriptが得意ではないので、見当違いかもしれません。

    情報ありがとうございました。
    少し運営してみて問題なければ、このままやってみます。

    トピック投稿者 sonic65

    (@sonic65)

    先ほどの訂正です。

    時間があったのでadd_form.jsを調べてみました。
    さっきの132行目〜をコメントアウトしてもフォーム要素のタイトルの変更が出来てしまいました。(Chromeのみでチェック)

    それで、314行目〜の

    s.children("input").blur(function(){
    	if (a(this).attr('title') == a(this).val()) {
    		a(this).parent().html('');
    	} else {
    		a(this).parent().html(a(this).val());
    	}
    	//確認画面へも要素を反映(パフォーマンスが悪くなれば、アルゴリズムを変える)
    	addTrustForm.asyncForm();
    });

    a(this).parent().html(a(this).val());

    をコメントアウトするとタイトルの編集が出来なくなりました。
    フォーム要素のタイトルの編集に限っては、その他のJavaScriptの命令ではなくここで行っているってことだと思います。

    環境によっては、textchangeプラグインでの発火が必要なのかもしれませんが、こちらで試した環境では、フォーム要素のタイトル編集では、add-form.jsの420行目〜の部分

    //テキストボックスへの入力値をvalueに反映
    	a("input[type=text]").bind("textchange", function(){
    		a(this).attr('value', a(this).val());
    	});

    は必要ないようです。

    サーバー:ロリポップ及びシックスコア
    (PHP5.4とPHP5.3だと思います)

    ブラウザ : Safari&Chrome

    参考になればと思います。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • トピック「[Trust Form]管理画面で編集するとき、入力メソッド(カーソル)の動きが変」には新たに返信することはできません。