Googleのhtml5プレースホルダがレンダリングされていませんか？

私は、クライアントが入力ボックス内のラベルを必要とするフォームを持っていて、古いJavaScriptの代わりにHTML 5のプレースホルダとGoogleのhtml5shivを使用することにしました。しかし、私のプレースホルダーはIEで正しく動作していないようです。これは私がshivを使用していたものです。Googleのhtml5プレースホルダがレンダリングされていませんか？

文書型：

<!DOCTYPE html>

シヴ：

<!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script> 
<![endif]-->

フォーム：

<form method="post" enctype="multipart/form-data" name="contactForm" id="contactForm"> 

    <input type="text" name="name" id="name" placeholder="Your Full Name..." /> 
    <input type="text" name="telephone" id="telephone" placeholder="Your Telephone Number..." /> 
    <input type="email" name="email" id="email" placeholder="Your Email Address..." /> 
    <textarea name="enquiry" id="enquiry" placeholder="Your Enquiry or Comments..."></textarea> 
    <p class="midpadLeft green_Button_margin_2"><span class="green_Button_2"><a href="javascript: document.contactForm.submit();" target="_self" class="green_Button_2">Submit Enquiry <img src="images/mid-envelope.png" alt="Submit"/></a></span></p> 

</form>

任意のアイデアそれは働いていない理由として、ここでのコードはありますか？

リビジョン：

は以下のコメントで提案されているコードを使用して、私は次のように私のコードを変更しましたが、それはまだ動作していません。

（そのスクリプトの内容はhereから直接コピーされた）を含むスクリプト：

<script type="text/javascript" src="scripts/placeholders.js" charset="utf-8"></script>

DOM readyイベントリスナー：

<body onload="Placeholders.init(true);">

出典

2012-02-14 Phil Young

プレースホルダ属性[コード内]（https://github.com/aFarkas/html5shiv/tree/master/src）への参照はないようです。 html5shivは実際にそれらをシムにすることになっていますか？ – pimvdb

私が知っている限り、html5shivは 'placeholder'属性に対して何もしません。（主にjQuery）利用可能な様々なシムがあります... [Modernizr]（https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills）リスト、または[自分の試行] （https://github.com/jamesallardice/Placeholders.js）（これはjQueryを必要としません） –

@JamesAllardiceあなたのコードを試しましたが、動作しません。リビジョン –

HTML5シヴは、単にIEでの以前に未知の要素のためのスタイリングを可能にします

。最新のバージョンは、パッチdocument.createElementのように、いくつか余分なことをしますが、それ以外のものはポリフィルしません。

placeholderをエミュレートする場合は、プレースホルダpolyfillを使用します。もし興味があるなら、私は、jQueryプラグイン形式で1を書いて次のようにhttp://mths.be/placeholder

は、それを使用してください：あなたが代わりに<label>を使用する必要があり、ところでhttp://mathiasbynens.be/demo/placeholder

：

$('input, textarea').placeholder();

をここでデモです@placeholderのテキストが「あなたのフルネーム」などの場合

出典

2012-02-14 13:32:07

私はこのスクリプトでasp：TextBoxを使用して問題に遭遇しています。コントロールにはasp RequiredValidatorコントロールが関連付けられていますが、値をキャッチできず、ポストバックが発生します。プレースホルダプラグインを削除すると、これが修正されます。どんな解決策ですか？ –

@Mathias良いプラグインプレースホルダ！ありがとうございました！ – lizardhr

Todd Northropのjquery.watermark NuGetパッケージもチェックしてください。

//polyfill placeholder in older browsers 
var inputs = $('input, textarea'); 

$.each(inputs, function (i, itm) { 
    var input = $(itm); 
    input.watermark(input.attr('placeholder')); 
});

私が提供する両方の方法を比較して、透かしは、より良いパスワードの入力にも対応しているようだが、透かしを設定することがそのそれほど簡単ではありません。

出典

2014-02-18 10:25:18

Googleのhtml5プレースホルダがレンダリングされていませんか？

答えて

関連する問題