-1

だから私は、フィールドの透かしを設定/削除する関数を作成しようとしています.入力html要素は次のようになります:

<input type="text" name="pollName" id="pollName" value="DD-MM-YYYY" onfocus="javascript: watermark(this,true,'DD-MM-YYYY')" onblur="javascript: watermark(this,false,'DD-MM-YYYY')" >

ただし、これは非常に長いため、コードをjavascriptに移動しようとしています。このコードを使用する予定です:

function watermark(dom,isFocus,watermark)
{
    if(isFocus)
    {
        if(dom.value === watermark)
        {
            dom.value = "";
        }
    }
    else if(!isFocus)
    {
        if(dom.value === '')
        {
            dom.value = watermark;
        }
    }
}

document.ready(function(){
    $('#addOption').click(addOption);
    $('.dateSelector').focusin(watermark(this,1,'DD-MM-YYYY'));
    $('.dateSelector').focusout(watermark(this,0,'DD-MM-YYYY'));
});

これが問題の HTML です。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>SPS: Create a new poll</title>
<link href="styles/stylePollCreator.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jsPollCretor.js"></script>


</head>

<body>

        <div id="pollSetup">
            <form action="" method="post">
                <label for="pollName:">Poll name</label>
                <input type="text" name="pollName" id="pollName" />
                <br />
                <label for="startDate">Start date: </label>
                <br />
                <input type="text" id="startDate" name="startDate" class="dateSelector" value="DD-MM-YYYY"/>
                <label for="endDate">End date: </label>
                <input type="text" id="endDate" name="endDate" class="dateSelector" value="DD-MM-YYYY"/>
                <br />
                <div id="pollOptions">
                </div>
                <input id="submitNewPoll" value="Create poll" type="submit" />
            </form>
            <button id="addOption">Add option</button>
        </div>
    </body>
</html>

addOption 関数は正常に動作していますが、透かし関数は、サイトが最初に読み込まれたときに 1 回呼び出され、その後は呼び出されないようです :/

お時間をいただきありがとうございます:)

4

2 に答える 2

1

focusin透かしは何も返さないため、引数に関数をfocusout期待します。技術的には を渡しています。つまり、それ自体ではなくundefined、 の結果を渡します。watermarkwatermark

だから、あなたはこれをしたい：

$('.dateSelector').focusin(function(){watermark(this,1,'DD-MM-YYYY')});

編集：

プレースホルダー属性を使用する必要があるという上記のコメントに同意します。したがって、入力は次のようになります。

<input type="text" name="pollName" id="pollName" placeholder="DD-MM-YYYY">

これは HTML5 属性であるため、古いブラウザーではポリフィルを使用する必要があることに注意してください。ただし、プレースホルダー polyfill をグーグルで検索すると、使用できるポリフィルが 100 万個見つかります。

于 2012-11-26T21:58:40.803 に答える
0

ただし、透かし機能は、サイトが最初に読み込まれたときに一度呼び出されるようです

はい、それはあなたがやっていることです

$('.dateSelector').focusin(watermark(this,1,'DD-MM-YYYY'));
$('.dateSelector').focusout(watermark(this,0,'DD-MM-YYYY'));

これはと同等です

watermark(this,1,'DD-MM-YYYY');
$('.dateSelector').focusin(undefined);
watermark(this,0,'DD-MM-YYYY');
$('.dateSelector').focusout(undefined);

関数をイベント登録に渡します。

$('.dateSelector').focusin(function(e) {
    watermark(this,1,'DD-MM-YYYY');
}).focusout(function(e) {
    watermark(this,0,'DD-MM-YYYY');
});

ただし、@MattBall が既にコメントしているように、placeholder古いブラウザをサポートする必要がある場合は、属性を使用して (既存のライブラリで) シムする必要があります。

<input type="text" name="pollName" id="pollName" placeholder="DD-MM-YYYY">
于 2012-11-26T22:01:03.987 に答える