5

ページに、プレースホルダーテキストを含む電子メール入力を含むHTML5フォームがあります。それは美しく機能し、ネイティブ検証が大好きです！

古いブラウザに最適なサービスを提供する方法がわかりません。プレースホルダーのテキストをコピーして値としてインプリントするJavaScriptを少し使用しています。それはうまく機能しますが、フォームに電子メールアドレスではないテキストがあるため、フォームの検証はオフになります。

検証を失いたくない..何かアイデアはありますか？

HTML

<input id="email" type="email" placeholder="Enter your email address">

JavaScript（プロトタイプ）：

var Placeholder = Class.create({
    initialize: function (element) {
        this.element = element;
        this.placeholder = element.readAttribute('placeholder');
        this.blur();
        Event.observe(this.element, 'focus', this.focus.bindAsEventListener(this));
        Event.observe(this.element, 'blur', this.blur.bindAsEventListener(this));
    },
    focus: function () {
        if (this.element.hasClassName('placeholder'))
            this.element.clear().removeClassName('placeholder');
    },
    blur: function () {
        if (this.element.value === '')
            this.element.addClassName('placeholder').value = this.placeholder;
    }
});
Event.observe(window, 'load', function(e){
    new Placeholder($('email'));

});

編集：

プレースホルダーをサポートするブラウザーがvalue属性を無視した場合、それは素晴らしいことではないでしょうか。

編集2：

いいえ、入力タイプをテキストに設定したくありません。これにより、検証の動作が電子メール構文からスペルチェックに変更されます。

4

3 に答える 3

4

プレースホルダーのサポートを検出し、サポートが存在しない場合にのみjavascriptを使用してプレースホルダーテキストをコピーするModernizrを使用します。

if(!Modernizr.input.placeholder){
  // copy placeholder text to input
}

これにより、プレースホルダーなどのhtml5フォーム属性をサポートするブラウザーでコピーを実行できなくなります。

于 2011-07-12T08:37:22.207 に答える
1

これを試して：

<input  type="email"   value="Enter Email" 
onfocus="if (this.value == 'Enter Email')  {this.value = '';}"
onblur="if (this.value =='') {this.value = 'Enter Email';}" />
于 2011-07-12T07:44:36.557 に答える
0

これは古い質問ですが、この質問に出くわした他のユーザーに役立つ可能性があります。

このhttp://afarkas.github.com/webshim/demos/demos/webforms.htmlを使用して、古いブラウザーをサポートするフォーム検証を行うことができます。これはjQueryとModernizerの上にあり、実装は非常に簡単です。

それが役に立てば幸い。

于 2012-05-04T13:59:29.210 に答える