ユーザーがテキストを入力している間に表示されている入力用のhtml透かしテキストを作成します

Question

私はbusinessがtheirname.mydomain.comを介してビジネスにアクセスすることを許可するアプリケーションを構築しています。私は今これを行うためのサインアップフォームを構築しています。

とにかく私は今日squarespaceを訪れ、実際に私が望むようなサインアップフォームを持っています。 squarespaces siteにブラウズして「試してみてください」をクリックすると、モーダルポップアップで登録フォームが表示されます。

ポップアップのように見えます。 usernameの入力ボックスにusername.squarespace.comのプレースホルダテキストが表示されます

ユーザ名の入力を開始すると、.squarespace.comは引き続き表示されます。

この動作をどのように複製できますか？

Answer 1

Hiya、あなたが解決策を使用して終わるかもしれないということのようだと誰かが同じ問題を持っていた場合の答えとして設定:)と今後の参考のために：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を追加することで解決することができます。