爲用戶輸入文字時保持可見的輸入創建html水印文本

Question

我正在構建允許企業通過theirname.mydomain.com訪問其業務的應用程序。我現在正在構建註冊表單來執行此操作。

無論如何，我今天遇到了方格空間，他們有一個實際上就像我想要的註冊表單。如果您瀏覽到squarespaces site並點擊「免費試用」，他們會在模式彈出窗口中註冊。

彈出窗口看起來像。用戶名輸入框中有一個用戶名佔位符文本.squarespace.com

當您開始鍵入用戶名時，.squarespace.com仍然可見。

如何複製此行爲？

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

Answer 2

您所輸入的他們可能動態地添加到.squarespace.com的用戶名。

你可以嘗試使用onKeyUp事件將文本添加到您的文本框，以及這樣的：

<input type="text" id="fname" onkeyup="this.value = this.value.replace('.hello.com', '') + '.hello.com'" /> 

Answer 3

當你輸入你的用戶名的初始文本疊加被第二它會動態定位爲取代你輸入。只需添加一個onkeyup事件處理程序，它可以計算當前輸入文本的寬度並相應地定位疊加層。

該網站的css是不是很精彩，雖然，看看會發生什麼，你輸入一個更大的用戶名：

但是這可以通過添加overflow: hidden父元素可以輕鬆解決。