Tumblr's "data-ghostwriter"

On the sign up page for Tumblr, it has three boxes, one for password, one for email, and one for your url. What interests me is the URL bit. Whatever you type is followed by .tumblr.com. You can't put the cursor after it or highlight it or delete it. How does it do that?

I check the source and it has the attribute data-ghostwriter=".tumblr.com". I didn't recognize it, so I googled it, and still nothing. I'm assuming it's a custom attribute, even though that seems like something that HTML开发者_如何学Go would have rules against, but I can't find anything about it in the linked javascript files.

So, two questions. How do they do it, and can you use custom HTML attributes?

edit: So html5 allows data- custom attributes and using jsbeautifier, the code their inputs is:

http://pastebin.com/b5Yd51Mi

How does this work though, I'm still a bit confused.

The "data-" attributes are explicitly allowed in HTML5. Anything can follow "data-" (well, anything within bounds of some reasonable syntactic rules for HTML attribute names). Generally you'd access the values with the "getAttribute()" method on HTML element nodes.

Now, while all that's true, it's a little fishy that tumblr is serving up those pages with an XHTML doctype :-)

This older SO question describes how the effect is done. They position a translucent box right over the input field. When you start typing, they make the box visible and fill it with two <span> elements: the first, with a copy of what you've typed, styled to be dark like text in the real input field, and the second, with the static ".tumblr.com" suffix, and styled to be light grey and "ghosty".