javascript - アラート後に入力ボックスの値を保持する

Question

入力ボックスにデフォルトのテキストがあるフォームを書いています。ユーザーが入力ボックスをクリックすると、onfocus がどのテキストを処理するかを明確にする必要があります。ただし、ユーザーが 140 文字を超えて入力した場合もユーザーに警告しています。しかし、アラートの後、テキストは再び null に変わります。これを処理するために、まだ機能していないフラグを設定しようとしました。

これが私のコードです：

<form method="post">
    <input
        type="text"
        maxlength="140"
        name="question"
        value=" What's your Question?"   
        onfocus="this.value = '';
            this.style.color = 'black';
            this.style.fontStyle = 'normal';
            if(refreshFlag) {
                this.value = askQues;
            }"
        onkeypress="if (this.value.length == this.getAttribute('maxlength')) {
                var askQues = this.value;     
                var refreshFlag = true;               
                alert('Please use less than 140 characters to ask question');
                this.value = askQues;
            }"                 
        style="color: black; font-style: normal;"
    />
</form>

コードも Jsfiddle にあります: http://jsfiddle.net/4gQSc/

Answer 1

コードは Firefox 20.0.1 で正常に動作するようです

入力フィールドにplaceholder属性を使用しないのはなぜですか?

Answer 2

あなたの問題はスコープの問題です。 ハンドラー内で宣言されている2つの変数askQuesとrefreshFlagを作成しています。そのため、関数の範囲外ではアクセスできません。

それらをウィンドウコンテキストに移動します。また、ロジックをscriptタグ内に移動するか、javascriptファイルに移動することをお勧めします。インラインをスタイルに置き換えます..もっときれいになります..

これを試して

HTML

<form method="post">
    <input type="text" maxlength="20" name="question" 
              placeHolder="What's your Question?" class="inputInactive"/>
</form>

CSS

.inputInactive{
    color: black;
    font-style: normal;
}

Javascript

$(function () {
    var refreshFlag;
    var askQuestion;
    $('input[name="question"]').on('focus', function () {
        this.value = '';
        if (refreshFlag) {
            this.value = askQues;
        }
    });

    $('input[name="question"]').on('keypress', function () {
        if (this.value.length == this.getAttribute('maxlength')) {
            askQues = this.value;
            refreshFlag = true;
            alert('Please use less than 140 characters to ask question');
        }
    });
});

フィドルをチェック

Answer 3

そのテキストをタイプの入力の値として割り当てることができますhidden。