Automatically clearing a textbox when the user clicks in it to begin to type - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Automatically clearing a textbox when the user clicks in it to begin to type

  • I have created a form that has some pre-filled values: so a textbox for name has "Name" in it and also a tooltip "Please enter you name".

    How can I clear this textbox automatically so that when the user clicks in it, the default value is cleared and the user is allowed to type in their real name?

    So far what I've done is try to give the textbox an ID (I did this through the form's settings) and pick it up using JS (i.e., document.getElementById(id)). One of the reasons this does not work is that on render, Sf automatically generates a very long string that becomes the ID for the textbox control on the form.

    Any help will be appreciated. Thanks in advance.

  • In our version (11.0), the Textbox field in the forms module allows you to designate a placeholder in the Edit options.  There is also a predefined value option but it sounds like you prefer placeholder functionality rather than a predefined value.   If for some reason you must use Predefined value rather than Placeholder, you should be able to find your element with Javascript using a query selector, which works on most modern browsers:

    var myInput = document.querySelectorAll("input[value='Predefined Name']")[0];

    Then you can register something like an onFocus event which would remove the existing value (make sure you only remove the existing value if it matches your predefined value), you'd annoy users if you wiped the field every time they focused it.  

    That said, I highly recommend using the existing Placeholder option if you have it in the editor, otherwise you could also add your placeholder on pageload:

    myInput.placeholder = "Your new placeholder";