2

我正在构建一个允许企业通过 theirname.mydomain.com 访问其业务的应用程序。我现在正在构建注册表单来做到这一点。

无论如何，我今天遇到了 squarespace，他们有一个实际上像我想要的注册表单。如果您浏览到squarespaces 网站并单击“免费试用”，他们会在模式弹出窗口中显示其注册表单。

弹出窗口看起来像。用户名的输入框有 username.squarespace.com 的占位符文本

当您开始输入用户名时，.squarespace.com 仍然可见。

我如何复制这种行为？

在此处输入图像描述

4

3 回答 3

1

他们可能会在您键入用户名时动态地将 .squarespace.com 添加到用户名中。

您可以尝试使用onKeyUp事件向您的文本框添加文本，如下所示：

<input type="text" id="fname" onkeyup="this.value = this.value.replace('.hello.com', '') + '.hello.com'" />
于 2012-04-06T10:25:01.543 回答
1

如果有人遇到同样的问题，请设置为答案:) 并供将来参考，因为您似乎最终可能会使用该解决方案：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',''));
    }
});
​
于 2012-04-06T11:49:45.447 回答
0

当您键入您的用户名时，初始文本覆盖被替换为第二个，它会在您键入时动态定位。只需添加一个onkeyup事件处理程序，它计算当前输入文本的宽度并相应地定位覆盖。

不过，该css网站的内容并不是很精彩，看看当你输入一个更大的用户名时会发生什么：

创建您的网站

但这可以通过添加overflow: hidden到父元素来轻松解决。

于 2012-04-06T10:28:41.830 回答