警报后保留输入框值答案

【问题标题】：Retaining input box value after alert警报后保留输入框值
【发布时间】：2013-05-10 19:02:49
【问题描述】：

我正在编写一个输入框有一些默认文本的表单。当用户单击输入框时，我希望文本清楚哪个 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/

【问题讨论】：

在警报之前将this.value存储在变量中并在警报之后将其设置回来的目的是什么？

标签： javascript html

【解决方案1】：

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

为什么不使用placeholder 属性作为输入字段？

【讨论】：

如果没有文字，它只会显示“Ask a question”，然后您可以删除整个onfocus属性。否则，您可以在 onfocus 事件中添加检查以查看文本是否不是“提问”。
@CodeMonkey 注意浏览器支持placeholder caniuse.com/input-placeholder
几乎所有现代浏览器都支持占位符。 IE8 和更低版本的 javascript 插件支持它。示例：mathiasbynens.be/demo/placeholder
iPhone 上的 chrome 是否支持该功能？

【解决方案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

【讨论】：

我知道。我在我的问题本身中提到了它。问题是如何保存价值
我希望我能将您的答案设为最佳答案。但我得到了一个简化的解决方案。非常感谢您的回答。

【解决方案3】：

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

【讨论】：

当然可以。使用 jQuery：$("#hiddenText").val(askQues);。您将在警报之后立即使用它，并且您需要一个<inpyt type="hidden" id="hiddenText">。为了稍后获取值：$("#hiddenText").val();

【解决方案4】：

在下面查看我的版本，我通过使用带有条件检查的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 很难调试、维护，也很混乱。

【讨论】：