0

我正在编写一个表单，其中输入框有一些默认文本。当用户单击输入框时，我希望文本清楚哪个 onfocus 处理。但是，如果他们输入了超过 140 个字符，我也会提醒用户。但是在警报之后，文本再次变为空。为了解决这个问题，我尝试设置一些标志仍然不起作用。

这是我的代码：

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

4

4 回答 4

2

您的代码似乎在 Firefox 20.0.1 上运行良好

为什么不对输入字段使用占位符属性？

于 2013-05-10T19:05:31.037 回答
1

你的问题是范围问题。您正在创建 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');
        }
    });
});

检查小提琴

于 2013-05-10T19:06:35.977 回答
0

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

于 2013-05-10T19:05:43.977 回答
0

在下面检查我的版本，我通过使用onblur带有条件检查的功能进行了简化。见下文，

演示：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 难以调试、维护并且也很混乱。

于 2013-05-10T19:22:17.777 回答