Create an html watermark text for an input that stays visible while a user enters text

I am building an application that allows a business to access their business via theirname.mydomain.com. I am building the signup form now to do this.

Anyway I came across squarespace today and their have a signup form that is actually like I want. if you browse to squarespaces site and click "try it free" they have their sign up form in a modal popup.

The popup looks like. the input box for username has a placeholder text of username.squarespace.com

When you start typing in a username the .squarespace.com is still visible.

How do I replicate this behaviour?

<img src="https://i.stack.imgur.com/kKdEf.png" alt="enter image description here">


Hiya Setting up as answer if someone had same issue :) and for future reference as it seems to be that you might end up using the solution: http://jsfiddle.net/NXAWW/

This will keep part of watermark in the text box like the sample in other page! have a good one,

<strong>Key is this</strong>

.keyup(function(){ var $input = $(this); if ($input.val().trim() != '') { $placeholder.val($input.val().trim() + $input.attr('placeholder').replace('test','')); //$placeholder.val(''); } else { $placeholder.val($input.val().trim() + $input.attr('placeholder').replace('test','')); } });

<strong>Full Jquery Code</strong>

// Create placeholder input to serve as background var $test = $('#test'); var $placeholder = $test.clone().removeAttr('id').removeAttr('placeholder').addClass('placeholder').val($test.attr('placeholder')); var $container = $('<span class="placeholder-container"></span>'); $container.insertAfter($test).append($test).append($placeholder); // Basic styling $container.css({ position: 'relative' }); $test.css({ position: 'absolute', left: 0, top: 0, zIndex: 100, backgroundColor: 'transparent', borderColor: 'transparent' }); $placeholder.css('color', 'transparent'); // Behavior for focus and blur to achieve the visual effect $test.focus(function(){ var $input = $(this); var $placeholder = $('.placeholder', $input.parent()); $placeholder.css('color', '#e0e0e0'); }).blur(function(){ var $input = $(this); var $placeholder = $('.placeholder', $input.parent()); if ($input.val() == '') $placeholder.css('color', 'transparent'); }).keyup(function(){ var $input = $(this); if ($input.val().trim() != '') { $placeholder.val($input.val().trim() + $input.attr('placeholder').replace('test','')); //$placeholder.val(''); } else { $placeholder.val($input.val().trim() + $input.attr('placeholder').replace('test','')); } }); ​


They probably dynamically add .squarespace.com to the username as you type it.

You could try using <strong>onKeyUp</strong> event to add text to your textbox as well like this:

<input type="text" id="fname" onkeyup="this.value = this.value.replace('.hello.com', '') + '.hello.com'" />


When you type your username the initial text-overlay is replaced by a second which gets dynamically positioned as you type. Just add an onkeyup event handler which calculates the width of the current inputted text and position the overlay accordingly.

The css of the site isn't quite wonderful though, see what happens as you type a larger username:

<img src="https://i.stack.imgur.com/lKiHs.png" alt="Create your website">

But this can be easily resolved by adding overflow: hidden to the parent element.


  • Jquery Sortable - Replacing Items rather than swapping items
  • Jquery: Is there some way to make val() return an empty string instead of 'undefined' for
  • Create non-selectable text watermark in PDF
  • Setting XSL FO background image from embedded SVG
  • Parse Framework with Swift
  • How to make SASS put relative paths in its output
  • Consuming a web service with the Netbeans Platform
  • How to protect an asp:textbox from user input?
  • Is there a way to clone native functions in javascript like window.alert or document.write
  • Fat binaries in iOS
  • CloseOptionsMenu doesn't work?
  • MultiLevel ExpandableListView not highlighting properly
  • Efficient algorithm to find additions and removals from 2 collections
  • cell spacing in div table
  • How do I get the list of bad records that didn't load in Bigquery?
  • Ember.js model to be organised as a tree structure
  • Reading a file into a multidimensional array
  • Android application: how to use the camera and grab the image bytes?
  • Thread safety of a fluent like class using clone() and non final fields
  • WPF - CanExecute dosn't fire when raising Commands from a UserControl
  • How to clear text inside text field when radio button is select
  • Scrapy recursive link crawler
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • Get object from AWS S3 as a stream
  • Cross-Platform Protobuf Serialization
  • Validaiting emails with Net.Mail MailAddress
  • 'TypeError' while using NSGA2 to solve Multi-objective prob. from pyopt-sparse in OpenMDAO
  • Do I've to free mysql result after storing it?
  • Jquery - Jquery Wysiwyg return html as a string
  • SVN: Merging two branches together
  • Arrays break string types in Julia
  • bootstrap to use multiple ng-app
  • How to get icons for entities from eclipse?
  • WPF Applying a trigger on binding failure
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • Java static initializers and reflection
  • Turn off referential integrity in Derby? is it possible?
  • Linking SubReports Without LinkChild/LinkMaster
  • Append folder name and increment by 1 using batch script
  • JaxB to read class hierarchy