Search Unity

Is there no "placeholder" text property for TextField()?

Discussion in 'UI Toolkit' started by MostHated, Sep 1, 2020.

  1. MostHated

    MostHated

    Joined:
    Nov 29, 2015
    Posts:
    1,235
    Heya,
    I was trying to add "placeholder" text to a TextField but I don't see anything by that name. Is it named something else and I am just not seeing it or does it really not exist? I saw "usageHint" and thought perhaps that might be it, but after reading the description of it, probably not.

    I imagine that in the meantime I could probably hack one together using events and adjusting the font color, but I feel that I really shouldn't have to do that. Hopefully, this will be added?

    Thanks,
    -MH
     
  2. jonathanma_unity

    jonathanma_unity

    Unity Technologies

    Joined:
    Jan 7, 2019
    Posts:
    229
    Hi MostHated,

    There are no built in support for "placeholder" text on the TextField. The current work around is to add this functionality yourself.
     
  3. MostHated

    MostHated

    Joined:
    Nov 29, 2015
    Posts:
    1,235
    I understand. I appreciate the reply. I would, though, like to request that one day this be considered to be added if possible.
     
    jonathanma_unity likes this.
  4. jonathanma_unity

    jonathanma_unity

    Unity Technologies

    Joined:
    Jan 7, 2019
    Posts:
    229
    Just got the confirmation that it's already in the backlog.
     
    Mj-Kkaya, Exanite and MostHated like this.
  5. MostHated

    MostHated

    Joined:
    Nov 29, 2015
    Posts:
    1,235
    Awesome, good deal. I appreciate it.
     
  6. liuhuan0924

    liuhuan0924

    Joined:
    Sep 2, 2020
    Posts:
    9
    I have completed this implementation, if you need to contact 771383629@qq.com
     
  7. MostHated

    MostHated

    Joined:
    Nov 29, 2015
    Posts:
    1,235
    RKar and jonathanma_unity like this.
  8. Oneiros90

    Oneiros90

    Joined:
    Apr 29, 2014
    Posts:
    78
    Here's my implementation:
    Code (CSharp):
    1. public static void SetPlaceholderText(this TextField textField, string placeholder)
    2. {
    3.     string placeholderClass = TextField.ussClassName + "__placeholder";
    4.  
    5.     onFocusOut();
    6.     textField.RegisterCallback<FocusInEvent>(evt => onFocusIn());
    7.     textField.RegisterCallback<FocusOutEvent>(evt => onFocusOut());
    8.  
    9.     void onFocusIn()
    10.     {
    11.         if (textField.ClassListContains(placeholderClass))
    12.         {
    13.             textField.value = string.Empty;
    14.             textField.RemoveFromClassList(placeholderClass);
    15.         }
    16.     }
    17.  
    18.     void onFocusOut()
    19.     {
    20.         if (string.IsNullOrEmpty(textField.text))
    21.         {
    22.             textField.SetValueWithoutNotify(placeholder);
    23.             textField.AddToClassList(placeholderClass);
    24.         }
    25.     }
    26. }
    Usage:
    Code (CSharp):
    1. myTextField.SetPlaceholderText("Placeholder text");
    You can also customize its appearance in USS:
    Code (CSharp):
    1. .unity-text-field__placeholder > .unity-base-text-field__input {
    2.     color: #969696
    3. }
     
  9. chadfranklin47

    chadfranklin47

    Joined:
    Aug 11, 2015
    Posts:
    226
    Last edited: Feb 25, 2022
  10. MostHated

    MostHated

    Joined:
    Nov 29, 2015
    Posts:
    1,235
    watsonsong and Xan_9 like this.
  11. watsonsong

    watsonsong

    Joined:
    May 13, 2015
    Posts:
    555
    The placeholder is really an useful feature.
    Code (CSharp):
    1.  
    2. // Hopefully these features will eventually be in the default TextField eventually.
    3. internal class BetterTextField : TextField
    4. {
    5. }
    6.  
    'Hopefully these features will eventually be in the default TextField eventually.' When it come true?
     
  12. yukunlinykl

    yukunlinykl

    Joined:
    Dec 17, 2021
    Posts:
    21
  13. HugoBD-Unity

    HugoBD-Unity

    Unity Technologies

    Joined:
    May 14, 2018
    Posts:
    499
    Hi everyone!

    Placeholder is finally supported by default for TextField and ValueTypeFields. For more info, please look into this thread.
     
    Oneiros90, Mj-Kkaya and yukunlinykl like this.
  14. ichenpipi

    ichenpipi

    Joined:
    Feb 24, 2021
    Posts:
    3
    Try this:
    Code (CSharp):
    1. public string inputContent = "";
    2. public string placeholder = "Text here...";
    3. private void OnGUI() {
    4.     // Draw TextArea
    5.     inputContent = EditorGUILayout.TextArea(inputContent, GUILayout.ExpandWidth(true), GUILayout.ExpandHeight(true));
    6.     // Draw Plcaeholder
    7.     if (string.IsNullOrEmpty(inputContent)) {
    8.         Rect pos = new Rect(GUILayoutUtility.GetLastRect());
    9.         GUIStyle style = new GUIStyle
    10.         {
    11.             alignment = TextAnchor.UpperLeft,
    12.             padding = new RectOffset(3, 0, 2, 0),
    13.             fontStyle = FontStyle.Italic,
    14.             normal =
    15.             {
    16.                 textColor = Color.grey
    17.             }
    18.         };
    19.         EditorGUI.LabelField(pos, placeholder, style);
    20.     }
    21. }
    It looks like:
    upload_2022-11-4_14-53-30.png
     
  15. sukrubeyyy

    sukrubeyyy

    Joined:
    Nov 8, 2020
    Posts:
    2

    Thanx :)
     
  16. RageAgainstThePixel

    RageAgainstThePixel

    Joined:
    Mar 11, 2020
    Posts:
    66
    2020.. it's in backlog... 2024... do it yourself :S

    Thanks for community for providing examples
     
  17. spiney199

    spiney199

    Joined:
    Feb 11, 2021
    Posts:
    7,864
    You missed the post by the Unity dev two posts above yours where this feature is now supported.
     
  18. RageAgainstThePixel

    RageAgainstThePixel

    Joined:
    Mar 11, 2020
    Posts:
    66
    And that is wasn't being back ported to the version we needed it in.
     
  19. spiney199

    spiney199

    Joined:
    Feb 11, 2021
    Posts:
    7,864
    New features are never back ported. That's always been the case.