Typically, when an input placeholder is used, the placeholder text disappears as soon as the user starts typing.
I'm considering providing users with a random example within the input field so they can follow along like they would with a placeholder. The issue arises when the user begins typing and the example disappears. Is there a way to keep the placeholder visible even if the user only types part of it?
For example:
Let's say the placeholder text is 'Lorem ipsum dolor sit amet'. If the user types 'Lorem ipsum', I expect them to try and replicate the example, keeping the text visible. However, if they type something different like 'Lorem dolor', indicating they are deviating from the example, I'd like the placeholder text to reappear after pressing 'backspace' until it matches the original placeholder (e.g. deleting 'dolor' to revert back to 'Lorem').
Currently, my workaround involves using an autocomplete dropdown, but I'm keen to explore if this functionality can be achieved using JavaScript (preferably jQuery).
UPDATE
I've made some progress by attempting to clone an element while maintaining the same style as the text input.
Here's a rough implementation:
var textinput = $('#textinput');
var textplaceholder = $('<span>');
var placeholdertext = textinput.attr('placeholder');
textinput.attr('placeholder', '');
textplaceholder.insertAfter(textinput);
textplaceholder.html(placeholdertext);
textplaceholder.copyCSS(textinput);
textinput.keyup(function() {
var current = $(this).val();
if(placeholdertext.substr(0, current.length) == current){
textplaceholder.html(placeholdertext);
} else {
textplaceholder.html(current);
}
});
Check out the fiddle here.
The challenge now lies in positioning the cloned element behind the input text, ensuring uniform alignment across browsers, and replicating mouse interactions like border glow when the text is focused on, etc.