Javascript Name Box

By default, everything after the last space will be marked as the surname. If you want to mark the surname explicitly, use forward slashes: /San Emeterio/

Code

HTML

<input id="mynamebox" class="namebox" value="Leonardo /da Vinci/" />

Javascript

Include jQuery and namebox.js.

CSS

.namebox, .namebox_display	{ width: 350px; font-size: 12px; font-weight: bold; padding: 3px 3px 3px 5px; border: solid 1px #bbb; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; display: inline-block; font-family: "Lucida Grande", Helvetica, Arial, sans-serif; margin: 0; }
.namebox_display		{ padding-left: 6px; padding-right: 2px; }
.namebox:focus			{ outline: none; background: #fffad0; }

.namebox_display span.surname	{ background: #345678; color: #fff; padding: 2px 5px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }