こんにちは、WPホームページ研究所の運営サポートチーム（@WP_LABO）です。
ウェブサイト内に「テキストをコピペする文字を表示したい場面」がありますよね。インプット用のhtmlタグを使えばフォーム項目に囲まれた状態で掲載できるので下記でカンタンにご紹介させていただきます。
スマホからもコピペできるフォームを埋め込む方法
コンテンツ運営では状況によって記事で特定の文字をコピペで使って欲しいシチュエーションがありますよね。もっとも一般的な方法は下記のインプットタグを使って値をvalueで指定すれば文字を表示可能です。
<input type="text" value="TEST12345" />実際に表示させた例が以下です。
ただ、文字を自由に編集できるため操作を誤るとテキストの一部が消えます。
そこで「readonly」属性を設定するのですがスマホ端末によって動作も微妙に違うのでスムーズに動きません。解決方法はテキストの指定位置にカーソルを合わせる関数をJavaScriptで指定するのが最適です。
<input readonly="readonly" type="text" value="TEST12345" onclick="this.setSelectionRange(0,9);" />下記が対策後の表示例ですね。PCもスマホでも動きます。少しフォームのデザインが変わっているのはCSSでフォームの外側に表示されている枠線を微調整しているからです。使いやすく余白を持たせています。
文字を選択する範囲に合わせて第一引数と第二引数が設定可能です。
<input readonly="readonly" type="text" value="TEST12345" onclick="this.setSelectionRange(4,7);" />以下は引数で選択範囲を指定しています。
第二引数は1000等大きめの数字にしておくと全部選択されます。下記がスマホで全範囲を指定した例ですね。
念のためソースコードで差し込んだ例も残しておきます。マウスやタップでフォームを押してご確認ください。
ワードプレスでは使っているエディターによってはカスタマイズをしないとモードの切り替えでタグ記述が除去されるので注意しなければなりません。記事の更新後に動かない等は消えた可能性が高いです。
本記事がご参考になれば幸いです。
最新式の無料プラグインを事前公開
WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
→ 改良されたプラグインを確認する
