html中input:text文本框事件使用

之前在网上看到一个题目；原题如下：

请用实现一个最简单的输入框提示功能：

要求：
1.输入框内默认显示提示文案，当用户点击输入框后，光标定位到输入框最前，并继续显示提示文案，当用户输入后替换默认提示文案，当用户清空输入框后从新显示默认提示文案
2.要求支持ie（6，7，8，9），firefox，chrome等浏览器
3.请写出html结构，javascript代码逻辑部分写出实现思路即可（有时间能写出代码者最佳，可以使用js库）

由于在解答该题目的过程中遇到了一些兼容性问题，就记录了下来。CSS3中可以直接使用input:text的placeholder属性实现对应的功能。

相对于其他的浏览器，我的答案如下：

DOM结构

<div>
    <label for="inputText">用户名</label>
    <input style="height: 30px;width: 200px" type="text" name="inputText" data-default-value="请输入用户名" id="inputText"
           value='请输入用户名'/>
</div>

这里用到的几个事件如下：

onpropertychange（IE独有）,oninput（W3C），也许别的解决方案还用到了其他事件，希望到时能够通过评论方式将代码共享。

注意：oninput事件只有通过addEventListener的方式绑定才会生效。

javascript代码如下：

var inputText = document.getElementById('inputText');
    var iniStart = -1;
    console.log(myData.dataset);
    inputText.onclick = function (e) {
//        console.log(this);
        setCaretPosition(this, 0);
    };
    if (inputText.onpropertychange) {
        inputText.onpropertychange = function () {
            console.log(this.value);
            if (this.value.trim().length == 0) {
                this.value = "请输入用户名";
            }
        };
    } else {
        inputText.addEventListener('input', function () {
            if (iniStart == -1) {
                this.value = this.value.replace('请输入用户名', "");
                iniStart++;
            } else if (this.value.trim().length == 0) {
                this.value = this.dataset.defaultValue;
                iniStart = -1;
                setCaretPosition(this, 0)
            }
        }, false);
    }
    function getCursortPosition(ctrl) {//获取光标位置函数
        var CaretPos = 0;    // IE Support
        if (document.selection) {
            ctrl.focus();
            var Sel = document.selection.createRange();
            Sel.moveStart('character', -ctrl.value.length);
            CaretPos = Sel.text.length;
        }
        // Firefox support
        else if (ctrl.selectionStart || ctrl.selectionStart == '0')
            CaretPos = ctrl.selectionStart;
        return (CaretPos);
    }
    function setCaretPosition(ctrl, pos) {//设置光标位置函数
        if (ctrl.setSelectionRange) {
            ctrl.focus();
            ctrl.setSelectionRange(pos, pos);
        }
        else if (ctrl.createTextRange) {
            var range = ctrl.createTextRange();
            range.collapse(true);
            range.moveEnd('character', pos);
            range.moveStart('character', pos);
            range.select();
        }
    }

其中setCaretPosition函数主要用来设置input中当前光标的位置。getCurPosition用来设置光标的位置。以上代码基本能够满足题目要求。

有其他解决方案的童鞋希望能够分享你们的源代码。