BillKnow.com

你为什么不生气

昨天晚上看《野火集》，第一篇文章是《中国人，你为什么不生气》，讲的道理浅显易懂，类似的文章也读过不少了，不过看完后让我对之前的某事情的看法有所改变了。

前阵子在北京出差，连续几天碰到私家车停在斑马线的情况，心里虽然有诸多不爽，但一般是找个间隙钻过去了。我是可忍，北京的老大妈老大爷就孰不可忍了。多次看到有几位司机被骂得狗血淋头，不敢出声，有一次是有三位大妈一起作战的，前面一个，驾驶室窗外一个，后面一个。不过也难怪老奶奶、老爷爷指责司机不遵守规则，因为他们大多是早上拖着购物车去买菜的，要是汽车占用过道，他们就基本上无路可走了。

我当时觉得老奶奶们火气太了点，认为他们在标榜自我素质，并且过个马路只是小事一桩，何必较劲呢。现在我的看法是截然相反了，我想无论什么时候，这样的讲规则的，教训别人的人应该更多一点。

如果今天别人占用斑马线我忍了，明天你就站在马路旁边发呆吧…

如果今天忍了那些垃圾食品、毒奶粉…，明天就等着拉肚子，肾结石吧….

如果今天忍了那些豆腐渣工程，明天就等着泥石流、洪水、地震来毁坏你的家园吧…

如果今天忍了那些不守诚信、胡作非为的资本家、腐朽的官僚，明天就等着别人在你头上拉屎吧。

……

textarea技巧

关于textarea的9个知识点：

1. Image as textarea background, disappears when text is entered

设置背景图片：

textarea {
background: url(images/benice.png) center center no-repeat; /* This ruins default border */
border: 1px solid #888;
}

需要注意的是设置background后会影响textarea的本身的style，因此要重新设置border。

焦点离开textara的时候显示背景图片，获取焦点的时候图片消失：

            $('textarea')
  .focus(function() { $(this).css("background", "none") })
  .blur(function() { if ($(this)[0].value == '') { $(this).css("background", "url(images/benice.png) center center no-repeat") } });

2. HTML5 placeholder text

对于支持placeholder的浏览器可以直接使用此属性：

<textarea placeholder="Remember, be nice!" cols="30" rows="5"></textarea>

3. Placeholder text, HTML5 with jQuery fallback

不支持placeholder的浏览器可以通过Jquery来实现：

判断一个元素是否支持某属性：

function elementSupportsAttribute(element, attribute) {
  var test = document.createElement(element);
  if (attribute in test) {
    return true;
  } else {
    return false;
  }
};

如果支持Placeholder则直接设置，否则通过Jquery来实现：

if (!elementSupportsAttribute('textarea', 'placeholder')) {
  // Fallback for browsers that don't support HTML5 placeholder attribute
  $("#example-three")
    .data("originalText", $("#example-three").text())
    .css("color", "#999")
    .focus(function() {
        var $el = $(this);
        if (this.value == $el.data("originalText")) {
          this.value = "";
        }
    })
    .blur(function() {
      if (this.value == "") {
          this.value = $(this).data("originalText");
      }
    });
} else {
  // Browser does support HTML5 placeholder attribute, so use it.
  $("#example-three")
    .attr("placeholder", $("#example-three").text())
    .text("");
}

4. Remove the blue glow

移除textarea获取焦点后显示的蓝色边框：

            textarea {
  outline: none;
}
          
需要注意的是此蓝色边框基本上作为了一种标准，去掉请慎重考虑。关于去边框，可以参见sofish写的文章：去除按钮、链接中的虚线框

5. Remove resize handle

 
去掉重新设置大小的功能：

textarea {
  resize: none;
}

6. Add resize handle 
增加边框大小调整功能：

需要用到Jquery ui的插件： resizeable interaction ，调用方法是：

$("textarea").resizable();

7. Auto-resize to fit content

根据内容自适应大小：

同样需要用到jquery插件：auto resizing textareas，使用方法如下：

$('textarea').autoResize();

8. Nowrap

通常可以使用如下方法来使文字不换行 #whatever { white-space: nowrap; }，但此方法对textarea无效，textarea需要用如下方法：

<textarea wrap="off" cols="30" rows="5"></textarea>

9. Remove default scrollbars in Internet Explorer

去掉默认的滚动条：

textarea {
  overflow: auto;
} 
所有的demo参见这里，文章来自Textarea Tricks。