2012-02-29 125 views
0

我有一個文本框,並且每次用戶按下一個鍵時,我計算該字段的新長度以查看仍有多少個字符可用。 基於這個數字,我:等待一個變量來改變值

  1. 檢查,如果「發送」按鈕應該啓用或不
  2. 檢查,如果顯示的長度應爲紅色或黑色(點菜Twitter)上的計數器

但現在我有一個問題;每個的keydown事件,我做的:

remaining = 100 - count; 

if (remaining > 9) 
{ 
    //blue counter; send is activated 
    //"if counter.class == red then counter.class = blue..." 
    //"send.off('click'); send.on('click', sendmessage)..." 
} 
else if ((remaining <= 9) && (remaining >= 0)) 
{ 
    //red counter; send is activated 
} 
else //remaining <0 
{ 
    //red counter; send is deactivated 
} 

每次用戶按下一個鍵後,3個集團的一個執行......是不是有辦法執行集團只有當變量發生變化「區域」(]∞, 9[; [9,0]; ]0; -∞[)?

+0

計數怎麼能小於零? – nnnnnn 2012-02-29 09:39:38

+0

我的不好,它實際上是剩餘的字符數(再次,像140的限制一樣的twitter) – Manu 2012-02-29 09:41:27

+1

你使用jQuery嗎? (我注意到'send.off(...)') – nnnnnn 2012-02-29 09:51:15

回答

1

毫無疑問,這可能是更優雅的完成,但答案很簡單,只是要記住長度的前值:

var prevCount = 10; 

function checkLength() { 
    var count = // your logic to get current count here 

    if (count > 9 && prevCount <=9) { 
     // count has changed to > 9 
    } else if (count <=9 && count >= 0 && (prevCount > 9 || prevCount < 0) { 
     // count has changed to <=9 
    } else if (count < 0 && prevCount >= 0) { 
     // count has changed to < 0 
    } 

    prevCount = count; 
} 

初始化prevCount任何值有意義時,屏幕加載...

(PS計數怎麼能小於零?)

更新:既然你已經確認你正在使用jQuery你可以做這樣的事情(假設「黑」與「紅」是在樣式表類有適當的顏色和格式設置):

$(document).ready(function() { 
    var limit = 100, 
     $rem = $("#remaining").addClass("black"), 
     $send = $("input"); 

    $("textarea").on("keydown keyup", function() { 
     var len = $(this).val().length, 
      remaining = limit - len; 

     $rem.text(remaining); 
     $send.prop("disabled", len === 0 || remaining < 0); 

     if (remaining <=9 && $rem.hasClass("black") 
      || remaining > 9 && $rem.hasClass("red")) 
      $rem.toggleClass("black red"); 
    }).keydown(); 
});​ 

禁用發送按鈕,如果有任何文字或太多文字;僅在必要時將班級從黑色更改爲紅色。 (您也可以使黑的默認,只是打開和關閉「紅色」類)。

演示:http://jsfiddle.net/ZAjez/