web-dev-qa-db-ja.com

テキスト入力フィールドのテキストが編集可能であることを示す最良の方法は何ですか?

Yelpのようなアプリを想像してみてください。この場合、何かを評価したい星の数を選択します。実行すると、事前に生成されたテキストがテキスト入力フィールドに表示されます。このテキストは、事前に生成された有用なレビューであるため、そのまま使用することも、削除して独自に作成することもできます。

私はこのテキストがあなたが使用する必要がないものであること、それがオプションであり、あなたに強制されていないことを示すための最良の方法は何かを決定しようとしています。編集可能であること。

私ができること:-編集可能であることを示すアイコンがあります(鉛筆ですか?)(あまり明確ではありません)-たとえば、 「編集するにはタップしてください」(少し面倒で、画面にヒントが表示されます)-画面に表示された瞬間にテキストを「選択」します。 (最もきれいな方法ですが、十分に明確ですか?)

私が見逃している明らかなことはありますか?何が一番いいと思いますか?

5
arnold

これに対処する良い方法は、多くの検索入力にある丸い閉じるアイコンを追加することだと思います。これは、テキストが編集可能であるだけでなく、使用しないことを選択した場合はクリアできることを示しています。

3
Jason

私の経験では、少なくとも次のことをするのが最善の方法です。

  1. テキストはハイコントラストである必要があります。たとえば、デザインに応じて、白地に黒(推奨)または黒地に白などです。

  2. テキストは、アプリケーションのラベルやその他の編集できないフィールドと視覚的に区別できる必要があります。

  3. アプリケーションでマウスを使用している場合は、マウスをその上に置くと、カーソルがIビームカーソルに変わることを確認します。

  4. アプリケーションでマウスを使用しない場合は、固定長方形の境界線や背景色の違いなどの追加のアフォーダンスを使用して、テキストがアプリケーションの他の部分と異なり、編集用に選択できることを示します。

2
Matt

私は単にこれを行います:

デフォルトテキストのテキスト領域が生成されるときはいつでも、デフォルトでselected textとして表示します。これにより、ユーザーはテキストが編集可能であると明確に感じるようになります。

$('#id').select().focus()

これをafterRenderに入れることができます

0

これは、画面に他に何があるかによって異なる、読み込まれた質問の一種です。

  • 編集可能なフィールドが複数ある場合は、アプリの編集状態を個別に設定できます(iOSの一般的な規則)。そして、編集が完了したら、保存してユーザーを最初の画面に戻します。
  • 編集可能なテキストを別の色(リンクの色の規則について考える)でオフに設定し、微妙な方法で扱うことができます。
  • フィールドの近くで「編集」と言っても問題はありません。それはエレガントではないかもしれませんが、私ができることを誤解することはありません(ただし、これは英語固有であり、アイコンはより良い解決策として役立ちます)
0
ckaufman