提醒后保留输入框值

我正在写一个表单，其中输入框有一些默认文本。当用户点击输入框时，我想要清楚哪些内容可以处理。不过，如果他们输入了超过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/

来源

2013-05-10 CodeMonkey

将alert.value存储到变量中并将其设置为alert后的目的是什么？ – 2013-05-10 19:06:45

你的代码似乎在Firefox 20.0.1

做工精细你为什么不使用placeholder属性为输入字段？

来源

2013-05-10 19:05:31 Broxzier

这是一个好主意..仍然在焦点将重置..对吗？' – CodeMonkey 2013-05-10 19:11:37

这实际上对我有用:) – CodeMonkey 2013-05-10 19:12:26

它将只显示“问一个问题”，如果没有文字，那么你可以删除整个onfocus属性。否则，您可以在onfocus事件中添加一个检查来查看文本是否不是“提出问题”。 – Broxzier 2013-05-10 19:13:17

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

来源

2013-05-10 19:05:43 Renan

你能举个例子吗？ – CodeMonkey 2013-05-10 19:11:18

当然。使用jQuery：'$（“＃hiddenText”）。val（askQues）;'。您将在警报之后使用此权限，并且您需要一个''。为了稍后获取值：'$（“＃hiddenText”）。val（）;' – Renan 2013-05-10 19:13:19

问题是范围问题。您正在创建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

来源

2013-05-10 19:06:35

我知道这一点。我在自己的问题中提到过它。问题是我如何保存价值 – CodeMonkey 2013-05-10 19:10:24

我希望我可以设置您的答案为最好的。但我有一个简化的解决方案。非常感谢您的回答。 – CodeMonkey 2013-05-10 19:51:10

检查下面我的版本，我用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很难调试，维护也很麻烦。

来源

2013-05-10 19:22:17

提醒后保留输入框值

回答

相关问题