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 に答える