首頁 > web前端 > js教程 > js實作文字方塊輸入文字個數字限製程式碼_javascript技巧

js實作文字方塊輸入文字個數字限製程式碼_javascript技巧

WBOY
發布: 2016-05-16 15:23:47
原創
1483 人瀏覽過

通常情況下,文字方塊輸入的文字個數並不是無限制的,一般都會限定一個輸入最高上限,較為人性化的網站可能會有可輸入字數倒數效果,比如還剩餘20可以輸入這樣的提示,以下就透過一個實例介紹如何實現此效果。

先看看效果圖:

程式碼如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

<html>

<head>

<title>文本框输入文字倒计效果代码</title>

<style type="text/css">

*

{

 margin:0;

 padding:0;

}

.box

{

 width:500px;

 margin:10px auto;

}

p span

{

 color:#069;

 font-weight:bold;

}

textarea

{

 width:300px;

}

.textColor

{

 background-color:#0C9;

}

.grey

{

 padding:5px;

 color:#FFF;

 background-color:#CCCCCC;

}

</style>

<script type="text/javascript" src="jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(function(){

 var $tex=$(".tex");

 var $but=$(".but");

 var ie=jQuery.support.htmlSerialize;

 var str=0;

 var abcnum=0;

 var maxNum=280;

 var texts=0;

  

 $tex.val("");

 $tex.focus(function(){

 if($tex.val()=="")

 {

  $("p").html("您还可以输入的字数<span>140</span>");

 }

 })

 $tex.blur(function(){

 if($tex.val() == "")

 {

  $("p").html("请在下面输入您的文字:");

 }

 })

 if(ie)

 {

  $tex[0].oninput = changeNum;

 }

 else

 {

  $tex[0].onpropertychange = changeNum;

 }

  

 function changeNum()

 {

 //汉字的个数

 str=($tex.val().replace(/\w/g,"")).length;

 //非汉字的个数

 abcnum=$tex.val().length-str;

 total=str*2+abcnum;

 if(str*2+abcnum<maxNum||str*2+abcnum==maxNum)

 {

  $but.removeClass()

  $but.addClass("but");

  texts=Math.ceil((maxNum-(str*2+abcnum))/2);

  $("p").html("您还可以输入的字数<span>"+texts+"</span>").children().css({"color":"blue"});

 }

 else if(str*2+abcnum>maxNum)

 {

  $but.removeClass("")

  $but.addClass("grey");

  texts =Math.ceil(((str*2+abcnum)-maxNum)/2);

  $("p").html("您输入的字数超过了<span>"+texts+"</span>").children("span").css({"color":"red"});

 }

 }

})

</script>

</head>

<body>

<div class="box">

 <p>请在下面输入您的文字:</p>

 <textarea name="weibao" class="tex" cols="" rows="8"></textarea>

</div>

</body>

</html>

登入後複製

希望本文所述對大家學習javascript程式設計有所幫助。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板