我正在构建一个允许企业通过 theirname.mydomain.com 访问其业务的应用程序。我现在正在构建注册表单来执行此操作。
无论如何，我今天遇到了 squarespace，他们的注册表单实际上就像我想要的那样。如果您浏览到squarespaces site 并单击“免费试用”，他们的注册表单会出现在一个模态弹出窗口中。
弹出窗口看起来像。用户名的输入框有 username.squarespace.com 的占位符文本
当您开始输入用户名时，.squarespace.com 仍然可见。
如何复制这种行为？
【问题讨论】：
如果有人遇到同样的问题，请设置为答案 :) 并供将来参考，因为您似乎最终可能会使用该解决方案：http://jsfiddle.net/NXAWW/
这将像其他页面中的示例一样在文本框中保留部分水印！祝你好运，
关键是这个
.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',''));
}
});
完整的 Jquery 代码
// 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',''));
}
});
【讨论】：
他们可能会在您输入用户名时动态地将 .squarespace.com 添加到用户名中。
您可以尝试使用 onKeyUp 事件向您的文本框添加文本，如下所示：
<input type="text" id="fname" onkeyup="this.value = this.value.replace('.hello.com', '') + '.hello.com'" />
【讨论】：
当您键入您的用户名时，最初的文本覆盖将被替换为第二个，它会在您键入时动态定位。只需添加一个 onkeyup 事件处理程序，它会计算当前输入文本的宽度并相应地定位叠加层。
虽然该站点的css 不是很精彩，但是当您输入更大的用户名时，看看会发生什么：
但这可以通过在父元素中添加overflow: hidden 轻松解决。
【讨论】：