3

こんにちは、ウェブサイトにフォームを作成しました。私は使用していますplaceholder="Full Name"が、IE8 (およびおそらく他の IE バージョン) で表示すると、フォームに何も表示されません。

使用してみvalue="" onfocus="if (this.value == 'Full Name') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Full Name';}"ましたが、フォームはまだ空です。何らかの理由で、フォームをクリックしてからオフにすると「氏名」が表示されます。

私が取り組んでいるウェブサイトは [usspcatalystcentre.org.uk][1] で、私の言いたいことがわかるでしょう。最初の 2 つの形式 (タイトルと氏名) は、私が使用しようとした場所です

value="" onfocus="if (this.value == 'Full Name') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Full Name';}"


フォームの残りの部分は、先ほど使用した場所ですplaceholder

ここに私が取り組んでいる実際のコードがあります

<form action="contact.php" method="post">


                <input id=title name=title type=text value="" onfocus="if(this.value=='Username') this.value='';" onblur="if(this.value=='') this.value='Username';" required class="top-formfields" value='<?php print $_SESSION['title']?>'>  <br /><br />
                <input id=fullname name=fullname type=text value="" onfocus="if(this.value=='Full Name') this.value='';" onblur="if(this.value=='') this.value='Full Name';" required  class="top-formfields" value='<?php print $_SESSION['fullname']?>'> <br /><br />
                <input id=companyname name=companyname type=text placeholder="Company Name" required  class="top-formfields" value='<?php print $_SESSION['companyname']?>'>    <br /><br />
                <input id=companynumber name=companynumber type=text placeholder="Company Registered Number" required  class="top-formfields" value='<?php print $_SESSION['companynumber']?>'> <br /><br />
                <textarea id=address name=address rows=5 placeholder="Address" required class="top-textarea"><?php print $_SESSION['address']?></textarea> <br /><br />
                <input id=postcode name=postcode type=text placeholder="Post Code" required  class="top-formfields" value='<?php print $_SESSION['postcode']?>'>    <br /><br />
                <input id=phonenumber name=phonenumber type=text placeholder="Phone Number" required  class="top-formfields" value='<?php print $_SESSION['phonenumber']?>'>    <br /><br />
                <input id=email name=email type=text placeholder="Email" required  class="top-formfields" value='<?php print $_SESSION['email']?>'> <br /><br />
                <input id=mobile name=mobile type=text placeholder="Mobile" required  class="top-formfields" value='<?php print $_SESSION['mobile']?>'> <br /><br />
                <input id=website name=website type=text placeholder="Website URL" required  class="top-formfields" value='<?php print $_SESSION['website']?>'> <br /><br />

前もってありがとう、トム

4

6 に答える 6

6

このplaceholder属性は、HTML5 の新しい改良点です。古い IE ではサポートされていません - http://diveintohtml5.info/forms.html

クロスブラウザを模倣するには、jQuery を使用することをお勧めします -例

于 2012-07-02T15:32:37.250 に答える
3

IE-9 はプレースホルダーをサポートしていないため、最初に頭に浮かぶ解決策はこれです。

幸運を！

<script type="text/javascript"> 
    if(navigator.userAgent.indexOf("MSIE") > 0 )
    {
        $(function()
        {
            var input = document.createElement("input");
            if(('placeholder' in input) == false)
            {
                $('[placeholder]').focus(function()
                {
                    var i = $(this);
                    if(i.val() == i.attr('placeholder'))
                    {
                        i.val('').removeClass('placeholder');
                        if(i.hasClass('password'))
                        {
                            i.removeClass('password'); this.type='password';
                        }
                    }
                }).blur(function()
                {
                    var i = $(this);
                    if(i.val() == '' || i.val() == i.attr('placeholder'))
                    {
                        if(this.type=='password')
                        {
                            i.addClass('password'); this.type='text';
                        }
                        i.addClass('placeholder').val(i.attr('placeholder'));
                    }
                }).blur().parents('form').submit(function()
                {
                    $(this).find('[placeholder]').each(function()
                    {
                        var i = $(this);
                        if(i.val() == i.attr('placeholder')) i.val('');
                    });
                });
            }
        });
    }


    </script>
于 2013-03-26T05:16:59.513 に答える
0

次のコードを名前を付けて保存し.js、入力タイプを変更してください

$(document).ready(function () {
    if ($.browser.msie) { //this is for only ie condition ( microsoft internet explore )
        $('input[type="text"][placeholder], textarea[placeholder]').each(function () {
            var obj = $(this);
            if (obj.attr('placeholder') != '') {
                obj.addClass('IePlaceHolder');

                if ($.trim(obj.val()) == '' && obj.attr('type') != 'password') {
                    obj.val(obj.attr('placeholder'));
                }
            }
        });

        $('.IePlaceHolder').focus(function () {
            var obj = $(this);
            if (obj.val() == obj.attr('placeholder')) {
                obj.val('');
            }
        });

        $('.IePlaceHolder').blur(function () {
            var obj = $(this);
            if ($.trim(obj.val()) == '') {
                obj.val(obj.attr('placeholder'));
            }
        });
    }
});

http://jsfiddle.net/wbcTm/79/

于 2014-07-21T12:30:00.947 に答える
0

Tom、placeholder は IE8 でサポートされている属性ではありません。

これは、あなたが進んでいる方向に役立つと思います：

フィールドに「氏名」を事前入力します。デフォルトで、あらかじめ value="Full Name" を指定してください。

onfocus= "if (this.value=='Full Name'){this.select();this.value='';this.style.color='#999999';}else{this.style.color='#000000';}"  

onclick= "if (this.value=='Full Name'){this.select();this.value='';this.style.color='#999999';}else{this.style.color='#000000';}" 

onblur=  "if (this.value==''||this.value=='Full Name'){this.value='Full Name';this.style.color='#999999';}else{this.style.color='#000000';}" 

onkeyup= "if (this.value=='Full Name'){this.select();this.style.color='#999999';}else{this.style.color='#000000';}" 

onchange="if (this.value=='Full Name'){this.style.color='#999999';}else{this.style.color='#000000';}"
于 2014-04-01T00:04:46.320 に答える
0 
if (!('placeholder' in $('<input>')[0])) { // Create a dummy element for feature detection
    $('input[placeholder], textarea[placeholder]').blur(add).focus(remove).each(add); // Select the elements that have a placeholder attribute
    $('form').submit(function(){$(this).find('input[placeholder], textarea[placeholder]').each(remove);}); // Remove the placeholder text before the form is submitted
}
于 2014-06-05T18:40:54.710 に答える