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 ，这些变量在处理程序中声明。因此，它们不能在函数范围之外访问。

将它们移动到窗口上下文中。并且最好将逻辑移动到脚本标记内部，或者更好地移动到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');
        }
    });
});

<强> Check Fiddle

Answer 3

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

Answer 4

检查下面的版本，我通过条件检查使用onblur函数进行了简化。见下文，

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

注意：尝试在<script></script>标记或外部js中移动脚本代码。内联js很难调试，维护和混乱。

警报后保留输入框值

4 个答案: