1

html:

<div class="div-input">
    <input type="text" id="loginname" name="username" value="" maxlength="25" 
        class="form-input" placeholder="Username"
    />
</div>
<div class="div-input">
    <input type="password" id="loginpassword" name="password" maxlength="25" 
        class="form-input" placeholder="Password"
    />
</div>
<div>
    <input type="submit" name="login" value="LOGIN" class="form-button" 
        onclick="return check_login(&quot;/&quot;)" 
    />
    <span id="logInfo"></span><span style="display: none;" id="overlay"></span>
    <span style="display: none;" id="popup">
        <img src="/public/images/loading.gif" />
    </span>
</div>

私の問題は、プレースホルダーがすべてのブラウザーで正常に機能していることです。IE8 と IE9 では Javascript を使用して解決しましたが、IE10 ではプレースホルダーは機能していますが、正しく動作していません。

  1. ページの読み込み時にPlaceholderがプレースホルダーの場合、IE10 ではプレースホルダーとしてしかPlaceholde表示されませんが (最後の文字が消えます)、入力ボックスをクリックしてページの外側に移動すると、正しいプレースホルダーが として表示されPlaceholderます。

  2. 入力フィールドに単語を入力すると、IE10 でのみ発生している入力フィールドの隅に十字記号 (閉じる記号) が表示されます。

4

3 に答える 3

1

JavaScript がネイティブの IE10 プレースホルダー機能を壊しているようです。

これをテストし、できれば修正するには、プレースホルダー用に記述した JavaScript を条件付きステートメントでラップして、IE9 以下にのみ適用されるようにします。

<!--[if lt IE 9]>
<script>
  document.createElement('header');
  document.createElement('nav');
</script>
<![endif]-->

または、Mathias Bynens による非常に優れた jquery プラグインが無料で利用でき、これらすべてを処理します: https://github.com/mathiasbynens/jquery-placeholder

一部の CMS には、このコードを使用してビルドされたプラグインが既に含まれています。Wordpress プラグインはこちら: http://wordpress.org/plugins/html5-placeholder-polyfill/

于 2014-02-26T21:17:17.617 に答える
-2

これを試してみてください。完全にサポートしていないブラウザーのプレースホルダー用の jquery pluin です。PHP コードを残して、この js を追加すると、動作するはずです。

(function($) {

/**
 * Spoofs placeholders in browsers that don't support them (eg Firefox 3)
 * 
 * Copyright 2011 Dan Bentley
 * Licensed under the Apache License 2.0
 *
 * Author: Dan Bentley [github.com/danbentley]
 */

// Return if native support is available.
if ("placeholder" in document.createElement("input")) return;

$(document).ready(function(){
    $(':input[placeholder]').not(':password').each(function() {
        setupPlaceholder($(this));
    });

    $(':password[placeholder]').each(function() {
        setupPasswords($(this));
    });

    $('form').submit(function(e) {
        clearPlaceholdersBeforeSubmit($(this));
    });
});

function setupPlaceholder(input) {

    var placeholderText = input.attr('placeholder');

    setPlaceholderOrFlagChanged(input, placeholderText);
    input.focus(function(e) {
        if (input.data('changed') === true) return;
        if (input.val() === placeholderText) input.val('');
    }).blur(function(e) {
        if (input.val() === '') input.val(placeholderText); 
    }).change(function(e) {
        input.data('changed', input.val() !== '');
    });
}

function setPlaceholderOrFlagChanged(input, text) {
    (input.val() === '') ? input.val(text) : input.data('changed', true);
}

function setupPasswords(input) {
    var passwordPlaceholder = createPasswordPlaceholder(input);
    input.after(passwordPlaceholder);

    (input.val() === '') ? input.hide() : passwordPlaceholder.hide();

    $(input).blur(function(e) {
        if (input.val() !== '') return;
        input.hide();
        passwordPlaceholder.show();
    });

    $(passwordPlaceholder).focus(function(e) {
        input.show().focus();
        passwordPlaceholder.hide();
    });
}

function createPasswordPlaceholder(input) {
    return $('<input>').attr({
        placeholder: input.attr('placeholder'),
        value: input.attr('placeholder'),
        id: input.attr('id'),
        readonly: true
    }).addClass(input.attr('class'));
}

function clearPlaceholdersBeforeSubmit(form) {
    form.find(':input[placeholder]').each(function() {
        if ($(this).data('changed') === true) return;
        if ($(this).val() === $(this).attr('placeholder')) $(this).val('');
    });
}
})(jQuery);

次に、php ページまたは別の js でプラグインを呼び出す必要があります。

 $(function() {
    // Invoke the plugin
    $('input, textarea').placeholder();       
   });

お役に立てれば！

于 2013-10-11T07:21:08.713 に答える
-2

ie10 での入力サポートの placeHolder 属性についてはよくわかりませんが、ie でプレースホルダーが必要な場合は、以下のように jquery を介してこれを行うことができます..

if(navigator.appVersion.match(/MSIE [\d.]+/)){
    var placeholderText = 'Some Placeholder Text';
    $('#loginname').val(placeholderText);
    $('#loginname').blur(function(){
        $(this).val() == '' ? $(this).val(placeholderText) : false;
    });
    $('#loginname').focus(function(){
        $(this).val() == placeholderText ? $(this).val('') : false;
    });
}

パスワードについても同じことができます..

コードを使用してこのように試してみましたか...動作するはずです...

$('#loginname').attr('placeholder', 'username');
$('#password').attr('placeholder', 'password');
于 2013-10-11T07:12:10.090 に答える