登録ページにプレースホルダーを追加する方法

サポート
1

登録ページにプレースホルダーテキストを追加したり、ボックスの下のテキストを変更したりする方法はありますか？

CleanShot 2021-11-17 at 04.48.23
CleanShot 2021-11-17 at 04.48.23351×469 11.5 KB

「いいね！」 1
2

ヘイ、ホセ

お探しのものを実現できるユーザー開発のプラグインを見つけました！

カスタムウィザードプラグインを使用すると、Discourseフォーラム用のユーザーウィザードを作成できます。情報を提供したり、ユーザー入力を取得したり、トピックの作成、プロフィールの更新など、さまざまなアクションを実行したりできます。

こちらでテストしたところ、ダウンロードしてインストールするための技術的な知識があれば、正常に動作するようです。試してみて、お探しのものかどうか確認してください！

インストール/使用に問題がある場合は、そのスレッドで質問してください。

では、
ロン

「いいね！」 2
3

ロニー、ありがとうございます。大変助かりました。今すぐ試してみます。

しかし、これはユーザーがサインアップした後でのみ使用できるフォームのようです。それ以前ではありません。

しかし、このユースケースが可能かどうか、念のためそこで確認します。

4

設定のカスタマイズテキストオプションを使用して、入力フィールドの下に表示されるテキストを変更できます。

  1. 移動先:
  • 管理者 :arrow_right: カスタマイズ :arrow_right: テキスト
  1. それぞれを検索します:
  • email.instructions
  • username.instructions
  • name.instructions_required
  • user.password.instructions
  1. 右側にある編集ボタンをクリックします。
  2. テキストを希望の新しいテキストに置き換えます。
  3. 変更を保存をクリックします。
「いいね！」 4
5

キーガンさん、どうもありがとうございます。大変参考になりました。

入力フィールドにプレースホルダーテキストを追加するために、CSSを変更する方法もご存知ですか？

6

CSSだけでは不可能だと思います。::placeholderセレクタは存在しますが、既存のプレースホルダーのスタイルを設定するために使用されます。

ただし、JavaScriptを使用すると実現できるようです。管理設定のテーマの<head>タグに以下を追加します。

<script type="text/discourse-plugin" version="0.11.1">
api.onPageChange(() => {
    document.getElementById('new-account-email').placeholder =
      'Replace with your email placeholder';
    document.getElementById('new-account-username').placeholder =
      'Replace with your username placeholder';
    document.getElementById('new-account-name').placeholder =
      'Replace with your name placeholder';
    document.getElementById('new-account-password').placeholder =
      'Replace with your password placeholder';
  });
</script>
「いいね！」 3
7

キーガンさん、どうもありがとうございます！素晴らしい解決策です！うまく機能しています。:slight_smile:

「いいね！」 1
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.