Erstellen Sie einen HTML-Wasserzeichentext für eine Eingabe, die sichtbar bleibt, während ein Benutzer Text eingibt

Question

Ich erstelle eine Anwendung, die es einem Unternehmen ermöglicht, über seinName.mydomain.com auf sein Geschäft zuzugreifen. Ich baue jetzt die Anmeldeform, um dies zu tun.

Jedenfalls bin ich heute auf Squarespace gestoßen und sie haben eine Anmeldeform, die ist eigentlich wie ich will. Wenn Sie zu squarespaces site navigieren und auf "versuchen Sie es kostenlos" klicken, haben sie ihr Anmeldeformular in einem modalen Popup.

Das Popup sieht wie aus. Das Eingabefeld für Benutzername hat einen Platzhaltertext von username.squarespace.com

Wenn Sie mit der Eingabe eines Benutzernamens beginnen, ist die .squarespace.com immer noch sichtbar.

Wie repliziere ich dieses Verhalten?

Answer 1

Hiya Einrichtung als Antwort, wenn jemand gleiches Problem hatte :) und für die Zukunft, wie es zu sein scheint, dass Sie die Lösung am Ende vielleicht mit: http://jsfiddle.net/NXAWW/

Dies wird in dem Textfeld eines Teil der Wasserzeichen halten wie die Probe in anderer Seite! ein gutes haben,

Key ist dies

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

Voll JQuery-Code

// 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

Sie wahrscheinlich dynamisch .squarespace.com zu dem Benutzernamen hinzufügen, wie Sie es eingeben.

Sie könnten versuchen, onKeyUp Ereignis mit Text zu Ihrem Textbox wie dies auch hinzufügen:

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

Answer 3

Wenn Sie Ihren Benutzername das ursprüngliche Text-Overlay-Typ durch eine zweite ersetzt wird, die als dynamisch positioniert wird du tippst. Fügen Sie einfach einen onkeyup Event-Handler hinzu, der die Breite des aktuell eingegebenen Textes berechnet und das Overlay entsprechend positioniert.

Die css der Website ist aber nicht ganz wunderbar, sehen, was, wie Sie einen größeren Benutzernamen eingeben passiert:

Aber dies kann leicht durch overflow: hidden Hinzufügen von dem Mutterelement gelöst werden.