CODEWITHSUNDEEP
javascripthtml
CodeMonkey
CodeMonkey

Reputation: 2295

Retaining input box value after alert

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/

Upvotes: 0

Views: 2607

Answers (4)

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

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.

Upvotes: 0

Sushanth --
Sushanth --

Reputation: 55740

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

Upvotes: 1

Geeky Guy
Geeky Guy

Reputation: 9399

You could assign that text as the value for an input of the hidden type.

Upvotes: 0

Broxzier
Broxzier

Reputation: 2949

Your code seems to work fine on Firefox 20.0.1

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

Upvotes: 2

Related Questions