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 type="text" name="inputText" data-default-value="请输⼊⽤户名" id="inputText"
value='请输⼊⽤户名'/>
</div>
这⾥⽤到的⼏个事件如下：
onpropertychange（IE独有）,oninput（W3C），也许别的解决⽅案还⽤到了其他事件，希望到时能够通过评论⽅式将代码共享。
注意：oninput事件只有通过addEventListener的⽅式绑定才会⽣效。
javascript代码如下：
var inputText = ElementById('inputText');
var iniStart = -1;
console.log(myData.dataset);
//        console.log(this);
setCaretPosition(this, 0);
};
if (propertychange) {
console.log(this.value);
if (im().length == 0) {
this.value = "请输⼊⽤户名";
}
};
} else {
inputText.addEventListener('input', function () {
if (iniStart == -1) {
this.value = place('请输⼊⽤户名', "");
iniStart++;
} else if (im().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 = ateRange();
CaretPos = 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 (ateTextRange) {
var range = ateTextRange();
html内容文本框veEnd('character', pos);
range.select();
}
}
其中setCaretPosition函数主要⽤来设置input中当前光标的位置。getCurPosition⽤来设置光标的位置。以上代码基本能够满⾜题⽬要求。有其他解决⽅案的童鞋希望能够分享你们的源代码。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。