Placeholder a input

hi all do not speak English very well, I know how I can put a placeholder to a textfield.

Here I leave an image example

I hope your help thanks
12592.png

Marcelo,

when you can use HTML 5, you can add an attribute to the input elements.
Here is an explanation:

Otherwise, just add the text to the textfield, set the text color to grey. Then add Listeners to the textfield to handle the placeholder display and text color.

Hope this helps,
Michael

I think you’re looking for:

textField.setInputPrompt("foo");

Even easier :wink:

Thanks for all .

setInputPrompt is not really the same feature as placeholder. Input prompt is cleared when you enter the field which may not be suitable. You can write a simple extension to add a “placeholder” attribute into the INPUT DOM element like this:


The PlaceHolder extension


public class PlaceHolder extends AbstractExtension {

  public static PlaceHolder extend(TextField field) {
		PlaceHolder me = new PlaceHolder();
		me.extend((AbstractClientConnector) field);
		return me;
  }

  protected Class<? extends ClientConnector> getSupportedParentType() {
        return TextField.class;
  }

  public void setPlaceHolder(String placeHolder) {
        getState().placeholder = placeHolder;
  }
    
  @Override
  public PlaceHolderState getState() {
        return (PlaceHolderState) super.getState();
   }

  private PlaceHolder() {
  }
}


The PlaceHolder state which handles the placeholder value


public class PlaceHolderState extends SharedState {

	private static final long serialVersionUID = 8503114118014932519L;
	
	public String placeholder;
    
}


And finaly the connector


@Connect(PlaceHolder.class)
public class PlaceHolderConnector extends AbstractExtensionConnector implements StateChangeEvent.StateChangeHandler {

	private static final long serialVersionUID = -3584902497101338136L;
	
	private VTextField textField;

	@Override
	protected void extend(ServerConnector target) {
		target.addStateChangeHandler(new StateChangeEvent.StateChangeHandler() {
			@Override
			public void onStateChanged(StateChangeEvent stateChangeEvent) {
				Scheduler.get().scheduleDeferred(new ScheduledCommand() {
					@Override
					public void execute() {
						updatePlaceHolder();
					}
				});
			}
		});
		textField = (VTextField) ((ComponentConnector) target).getWidget()
	}


    @Override
    public PlaceHolderState getState() {
        return (PlaceHolderState) super.getState();
    }
	
	private void updatePlaceHolder() {
		textField.getElement().setAttribute("placeholder", getState().placeholder);
	}

}

To use it in your code =>


TextField searchField = new TextField();
PlaceHolder placeHolder = PlaceHolder.extend(searchField);
placeHolder.setPlaceHolder("Search...");

I think that this extension provides a must have feature and it should be added as a core extension with Vaadin. And except if I missed something, I was unable to find it ! Perhaps in the next 7.1 release ?

Extensions are really powerful in Vaadin 7
Hope it helps.

I’m totally with you but after trying to implement your extension, I’m pretty depressed, that it doesn’t work for me.
The TextField simply doesn’t show the placeholder.

In the first place I had the problem to import the necessary packages.

for my PlaceHolder.java I’ve imported the following:

[code]
import com.vaadin.server.AbstractClientConnector;
import com.vaadin.server.AbstractExtension;
import com.vaadin.server.ClientConnector;
import com.vaadin.ui.TextField;

[/code]PlaceHolderState imports:

[code]
import com.vaadin.shared.communication.SharedState;

[/code]PlaceHolderConnector:

[code]
import com.vaadin.client.ComponentConnector;
import com.vaadin.client.ServerConnector;
import com.vaadin.client.communication.StateChangeEvent;
import com.vaadin.client.extensions.AbstractExtensionConnector;
import com.vaadin.client.ui.VTextField;
import com.vaadin.shared.ui.Connect;
import com.google.gwt.core.client.Scheduler;
import com.google.gwt.core.client.Scheduler.ScheduledCommand;

[/code]Maybe here you can see what I’m doing wrong. Inside the classes I’ve used the exact same code you’ve posted. Eclipse doesn’t show any errors, so maybe you can help me. I would be very happy to get any ideas to make it work.

Aloha Hey,
Hendrik

Well,

Your imports seems to be good: if it wasn’t, I suppose that Eclipse would have detected an error.

Now here’s some ideas:

  • Is the widget in your main project (UI) or in another java project ? In the last case did you update your widgetset definition (xxxx.gwt.xml)?
  • Did you compile your widgetset?
  • Have you tried to display the debug window (add ?debug=1 in your URL and check if there’s an error - red lines)
  • Try to inspect your page and verify if the textfield has the extra attribute “placeholder”
  • Is your browser HTML5 compliant? (placeholder is an HTML5 attribute)

Can you attach a sample project with your code, it will be easier for me to understand what’s wrong.

Eric, please add a new enhancement ticket about the input prompt behaviour, I also think it probably should work so that the prompt isn’t cleared on focus but instead on input.

And as a reminder, consider the use of the prompt cafefully in order not to confuse users:
Don’t use placeholder text as labels

Hi Eric,
This is a cool idea to add an attribute to provide proper input prompt support, but like Hendrik, I couldn’t get this to work.
I’ve created all the classes, re-compliled the widgetset, no errors or warnings. But I don’t get any prompt.
Is there any client-side widget code that goes along with this?
Is there another step beyond what you’ve put in your post above?
I agree this should be built-in 7.x behaviour. I’ve seen ticket #9562 but I guess there’s not much movement on it…
Many thanks for your posting and help you can provide.
Peter

In Vaadin 6, I use javascript to add the placeholder attribute:

TextField tf = new TextField(); tf.setInputPrompt("Search..."); tf.setDebugId("myId"); window.executeJavaScript("document.getElementById('myId').placeholder = 'Search...';" I couldn’t find a way to add the attribute in Vaadin.

Page.getCurrent().getJavaScript().execute(…); should do the trick.

Why doesn’t setInputPrompt set the placeholder attribute? We’ve not seen any issues with setInputPrompt not working like a placeholder attribute.

The usual reason: browser compatibility. Older browsers don’t support the placeholder attribute. We should use it, but until all browsers that Vaadin supports don’t allow it, were stuck with something custom.

And why the custom implementation doesn’t work like the placeholder attribute, you may wonder? Well, the placeholder attribute wasn’t very known (don’t know if it was even a thing then) when the Vaadin input prompt was implemented. I guess we could change the behavior, but I would not expect it.

Vaadin 8 should most likely start using the native placeholder attribute, though.

Does this also work for password type inputs?

You can use this add-on:

https://vaadin.com/directory#!addon/dom

For example:

Dom dom = new Dom(this.nameField);
dom.setAttribute("placeholder", "User Name");

It works for password input too:

Dom dom = new Dom(this.passwordField);
dom.setAttribute("placeholder", "Password");

Hi thanks its works

https://vaadin.com/directory#!addon/dom

Dom dom = new Dom(this.passwordField);
dom.setAttribute(“placeholder”, “Password”);

Eric, tried your code. Definitely not working for me. Performed all the steps you indicated and the HTML shows no placeholder attribute.

Has anyone gotten the PlaceHolderConnector cod to work with their project? I think I’m confused on what updates are need for my project/external project. I can go either way, I just need to know what I’m missing here.

Any help is appreciated. Thanks!

Also, Dom addon sounds great, but appears to not work for 7.6 and its definitely not something I want to use if its not supported for version 8. Wish that addon was just part of the Vaadin framework.

So, how do I put a hint text in a TextField in Vaadin 8? … “setInputPrompt” doesn’t seem to be there anymore…