【解決】文字入力のプラグインのデザインについて

[ゆうた]

現在私は、「111_InputForm」というプラグインを使用して文字のキーボード入力を可能にしています。
文字入力をする場面によってそれぞれ文字を打つ欄（文字が入力される四角い枠）のデザインを変えたいのですが、いい方法ありますでしょうか。

https://plugin-mz.fungamemake.com/archives/754

↑111_InputFormプラグイン

[basu]

こんにちは。

入力欄のデザインはCSSで行われているのでCSSに新しいデザインを追加し、コマンドパラメータで使用するCSSセレクターを使い分けるのはどうでしょうか？

入力欄のセレクターを設定している個所は「Game_Interpreter.prototype._inputForm」関数の以下のコードになります。

コード: 全て選択

this.input.setAttribute('id', '_111_input');

「 '_111_input'」のCSSセレクターをコマンドパラメータで設定するようにすればイベント毎にデザインを使い分けることができると思います。

よろしくお願いします。

[ゆうた]

こんにちは。回答いただきありがとうございます。

きっとおっしゃる通りの工程を踏めば異なるデザインを使い分けることが可能になるんだとは思いますが、なにぶんド初心者なものでコマンドパラメータ以降の文章が理解できませんでした。申し訳ございません。
入力欄のセレクターを設定している箇所というのが一体何の話なのか理解できていません。

ツクールひよこレベルの僕でも分かるように解説していただけると助かります。
無知すぎて本当に申し訳ないです。

[basu]

プラグインとCSSを暫定的に修正を行いました。
簡単な動作確認は行っていますが、不具合がある可能性があります。

【プラグイン】
https://raw.githubusercontent.com/basuk ... putForm.js

【CSS】
https://raw.githubusercontent.com/basuk ... utForm.css

CSSファイルはプロジェクト配下にあるcssフォルダの中に保存してください。

CSSセレクターはCSSファイルに記載されている「#〇〇〇{」の「#〇〇〇」に当たります。(#_111_inputなど)
サンプルとしてCSSに「#_111_input2」というセレクターを追加しました。(セレクターは自由に設定できます)
コマンドパラメータの「入力フォーム(CSS)」に#を抜いたセレクター「_111_input2」を入力すると「#_111_input2」のセレクターが適用され入力欄の角が丸まって表示されるかと思います。

デザインはCSSで設定されているので、CSSでデザインの設定を行ってください。
セレクターなどCSSについてはツクールとは別機能なので詳しくはネットなどで調べてみてください。

よろしくお願いします。

[ゆうた]

わざわざ改良していただきありがとうございます。感激です。
入力フォームからデザインを使い分けることが可能でした。尊敬いたします。

追加の質問で申し訳ないのですが、「決定ボタン」をのデザインを場面によって変える、それか消す（または見えなくする）ことは可能でしょうか？
（決定ボタンの枠ではなく文字の「決定」の部分）
決定ボタン内の文字の部分はcssではなくjsの方で設定されているかと思いますが、どうすれば使い分けられるのかはまるで見当つきませんでした。

無理な質問でしたら申し訳ないです。

[basu]

決定ボタンの文字をコマンドパラメータで設定できるようにしました。
※未設定にしてしまうとボタンが潰れてしまうので、スペースなどで調整を行ってください。

【プラグイン】
https://raw.githubusercontent.com/basuk ... putForm.js


よろしくお願いします。

[ゆうた]

迅速な対応心から感謝します。
動作確認してみたところ、決定ボタンは指定どおりの位置に配置できるのですが、入力欄が画面外左上に固定されてしまいました。なにが原因なのでしょうか。

[basu]

すみません。
こちらの修正ミスです。

修正をしましたのでご確認をお願いいたします。

【プラグイン】
https://raw.githubusercontent.com/basuk ... putForm.js

[ゆうた]

2度も要望に応えてくださったにもかかわらずたびたびすみません。

このプラグインは1度入力した内容を記憶して、候補として表示する機能があると思うのですが、その機能をなくしていただきたいです。（写真の「雨」「panda」）
自分でもなんとかできないかとGPTを使って色々試してみましたが力不足で全然わかりませんでした。
一度解決済みとさせていただいたにもかかわらず、申し訳ないです。この機能さえなくなればあとは完璧なのでどうか力を貸していただきたいです。何卒よろしくお願いします。

[basu]

すみません。
いろいろと試してみたのですが、入力候補(オートコンプリート)の機能を無効にすることができませんでした。
技術的な話になるので詳しいことは割愛しますが、この入力候補(オートコンプリート)の機能はツクールやプラグインによる機能ではなく入力機能にある機能(HTMLの機能)となります。
無効にする方法は紹介されていたのですが、試しても無効にすることができませんでした。

「input 入力候補 無効」や「autocomplete=off」などで検索をすると詳しい情報が出てくると思います。

また、詳しい方がいれば助力をして頂ければと思います。


お力になれず申し訳ありません。
よろしくお願いします。