为输入创建html水印文本，当用户输入文本时该输入保持可见 [英] Create an html watermark text for an input that stays visible while a user enters text

问题描述

我正在构建一个应用程序，该应用程序允许企业通过他们的name.mydomain.com访问他们的企业.现在，我正在构建注册表单.

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.

无论如何，我今天遇到了Squarespace，他们的注册表格实际上就像我想要的.如果您浏览到 squarespaces网站并单击免费试用"，则将在模式弹出窗口中显示其注册表单.

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.

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

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

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

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

我该如何复制这种行为?

How do I replicate this behaviour?

推荐答案

Hiya如果有人遇到同样的问题，请设置为答案:)，以备将来参考，因为您似乎最终可能会使用该解决方案: http://jsfiddle.net/NXAWW/

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,

关键是这个

.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',''));
    }
});
​

这篇关于为输入创建html水印文本，当用户输入文本时该输入保持可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！