提醒後保留輸入框值

我正在寫一個表單，其中輸入框有一些默認文本。當用戶點擊輸入框時，我想要清楚哪些內容可以處理。不過，如果他們輸入了超過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

提醒後保留輸入框值

回答

相關問題