Retaining input box value after alert

Question

I am writing a form where input box has some default text. When user clicks the input box, i want the text to be clear which onfocus handles. However i am also alerting user if they have entered over 140 chars. But after alert the text changes to null again. TO handle this i tried setting some flag still not working.

Here is my code:

<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>

Code also at Jsfiddle: http://jsfiddle.net/4gQSc/

Answer 1

Your code seems to work fine on Firefox 20.0.1

Why don't you use the placeholder attribute for the input field?

Answer 2

You problem is the scoping issue. You are creating 2 variables, askQues and refreshFlag which are declared inside the handler. So they are not accessible outside the scope of the function.

Move those up into the window context .And also it is a better idea to move the logic to inside the script tag, or better into a javascript file. Replace the inline with styles.. It would be a lot cleaner..

Try this

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');
        }
    });
});

Check Fiddle

Answer 3

您可以将该文本分配为hidden类型输入的值。

Answer 4

Check my version below, I simplified by using onblur function with a condition check. See below,

DEMO: http://jsfiddle.net/9euwq/

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

Note: Try moving the script code inside <script></script> tags or an external js. Inline js are hard to debug, maintain and also messy.