1

Using jquery to set default value of input box

Posted August 7th, 2009. Filed under JavaScript

Well, there are couples of tutorials online to teach us, and also lots of jquery plugin for it. But I feel like I don’t need that huge functionality for this tiny thing.

So I wrote this one which is just for the little functionality.

Feature:

# default value in input box after page loaded

# on focus,

if -> input nothing -> clear to blank,

else -> keep the previous input value.

# on blur,

if -> input nothing -> back to default value,

else -> keep the previous input value.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>default value for text field</title>
  <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
  </head>
  <body>
 
  <input type="text" id="inputTxt" defaultval="你在想什么..." />
  <input type="button" id="submitBtn" value="提交" />
 
  </body>
  <script>
  $(document).ready(function(){
      var defaulval = $("#inputTxt").attr("defaultval");
      var checkInputVal;
      $("#inputTxt").focus(function(){
        checkInputAval = checkInput("#inputTxt", defaulval);
        if (checkInputAval) {
          setToEmpty("#inputTxt");
          $(this).css("color","#000");
        }
      });
 
      $("#inputTxt").blur(function(){
        checkInputAval = checkInput("#inputTxt", defaulval);
        if (checkInputAval) {
          setToDefault("#inputTxt", defaulval);
        }
      });
 
      setToDefault("#inputTxt", defaulval);
  });
  function setToDefault(element, defaulval) {
    $(element).val(defaulval);
    $(element).css("color","#ccc");
  }
  function setToEmpty(element) {
    $(element).val("");
  }
  function checkInput(element, defaulval) {
    if ($.trim($(element).val()).length == 0) {
        return true;
    }
    if ($.trim($(element).val()) == defaulval) {
        return true;
    }
    return false;
  }
  </script>
 
</html>

Feel free to let me know if you find some bugs or would like to give some suggestion. :]

It’s Cora’s pleasure to get information from all you guys.

++Cora++

  • Share/Bookmark
0

关于split(), 那些被我们遗忘的

Posted July 27th, 2009. Filed under JavaScript

widget title on the right

为”Little fox is learning”写皮肤的时候, 在widget title文字竖排的问题上还真的是耗费了很多精神在里面.

其实, 网路上有很多老师讲解关于如何对文字进行竖排版的方法, 但是, 大部分是针对于中文, 为了解决古代诗词排版的难题, 可是, 对英文来讲, 似乎找不到太过对症的办法, 所以还是自己摸索着写了.

本质上需要解决的问题仅仅是, 如何将字符串转化为数组, 前提是没有任何可以供分割的字符, 比如”;”, 或者”,”.

开始的时候是这样写的:

var i,strCount, tempStr;
tempStr = '';
strCount = inputStr.length;
for (i = 0; i &lt; strCount; i ++) {
  tempStr += inputStr[i] + '&amp;nbsp;';
}
document.write(tempStr);

这样写会错么? 会, 也不会.

当然, firefox, chrome, safari, opera, IE8 都是会通过的, 但是, IE6, 7 却不能够保证.

因为当用compatible view查看的时候发现, 所有的”inputStr[i]“都是”undefined”.

IE6, 7是无法识别一个字符串作为数组使用么?

也许是.

所以才惊奇的发现了split()的被遗忘掉的功用性.

strCount = inputStr.length;
tempStr ='';
strArray = str.split('');
for (i=0; i&lt; strCount ; i++) {
  tempStr += strArray[i] +  '&amp;nbsp;';
}

这样的方式在IE6,7下也是被通过的, 看来, IE6,7对于js object的要求应该算是苛刻的么?

如果你知道其中原因就告诉我吧.

++好孩子珊瑚++

  • Share/Bookmark