Question

所以我有这个联系表单，我希望在每个输入中放置文本，当用户点击它时文本消失，这样他们就可以添加内容 - 当用户点击其他内容时，它会重新出现。我用标签和负边距以及位置相对来做了这个。我打算为每个输入添加一个onclick函数。

我的问题是 - 是否有类似Offclick（）的功能？或类似于mouseOver（）和MouseOut（）的东西？

Answer 1

文字输入包含onblur，并且选择框中包含可以连接的onchange个事件。

<input type="text" id="UserName" name="UserName" value="Placeholder ..." />

<script type="text/javascript">
var el = document.getElementById("UserName");
var original_text = el.value;
el.onblur = function() {
    // `this` is set to the input element by the browser
    if ( ! this.value ) {
        this.value = original_text;
    }
};
</script>

使用jQuery，它更容易：

var el = $("#UserName");
var original_text = el.val();
el.blur(function(){
    // `this` is set to the input element by jQuery.
    if ( ! this.value ) {
        this.value = original_text;
    }
 });

Answer 2

将title属性设置为与textboxes的值相同，然后写：

$("input[type=text]").bind("focus",function(){
var $this = $(this);
if($this.attr("title") ==$this.val()){
$this.val('');
}).bind("blur",function(){

var $this = $(this);
if($this.val() ==''){
$this.val($this.attr("title"));
});

或者您可以使用现成的解决方案，例如： http://code.google.com/p/jquery-watermark/

OffClick（）函数

2 个答案: