<!DOCTYPE html>
<html>
<head>
<title>InputPostion</title>
<script type="text/javascript">
var kingwolfofsky = {
/**
* 获取输入光标在页面中的坐标
* @param {HTMLElement} 输入框元素
* @return {Object} 返回left和top,bottom
*/
getInputPositon: function (elem) {
if (document.selection) { //IE Support
elem.focus();
var Sel = document.selection.createRange();
return {
left: Sel.boundingLeft,
top: Sel.boundingTop,
bottom: Sel.boundingTop + Sel.boundingHeight
};
} else {
var that = this;
var cloneDiv = '{$clone_div}', cloneLeft = '{$cloneLeft}', cloneFocus = '{$cloneFocus}', cloneRight = '{$cloneRight}';
var none = '<span style="white-space:pre-wrap;"> </span>';
var div = elem[cloneDiv] || document.createElement('div'), focus = elem[cloneFocus] || document.createElement('span');
var text = elem[cloneLeft] || document.createElement('span');
var offset = that._offset(elem), index = this._getFocus(elem), focusOffset = { left: 0, top: 0 };
if (!elem[cloneDiv]) {
elem[cloneDiv] = div, elem[cloneFocus] = focus;
elem[cloneLeft] = text;
div.appendChild(text);
div.appendChild(focus);
document.body.appendChild(div);
focus.innerHTML = '|';
focus.style.cssText = 'display:inline-block;width:0px;overflow:hidden;z-index:-100;word-wrap:break-word;word-break:break-all;';
div.className = this._cloneStyle(elem);
div.style.cssText = 'visibility:hidden;display:inline-block;position:absolute;z-index:-100;word-wrap:break-word;word-break:break-all;overflow:hidden;';
};
div.style.left = this._offset(elem).left + "px";
div.style.top = this._offset(elem).top + "px";
var strTmp = elem.value.substring(0, index).replace(/</g, '<').replace(/>/g, '>').replace(/\n/g, '<br/>').replace(/\s/g, none);
text.innerHTML = strTmp;
focus.style.display = 'inline-block';
try { focusOffset = this._offset(focus); } catch (e) { };
focus.style.display = 'none';
return {
left: focusOffset.left,
top: focusOffset.top,
bottom: focusOffset.bottom
};
}
},
// 克隆元素样式并返回类
_cloneStyle: function (elem, cache) {
if (!cache && elem['${cloneName}']) return elem['${cloneName}'];
var className, name, rstyle = /^(number|string)$/;
var rname = /^(content|outline|outlineWidth)$/; //Opera: content; IE8:outline && outlineWidth
var cssText = [], sStyle = elem.style;
for (name in sStyle) {
if (!rname.test(name)) {
val = this._getStyle(elem, name);
if (val !== '' && rstyle.test(typeof val)) { // Firefox 4
name = name.replace(/([A-Z])/g, "-$1").toLowerCase();
cssText.push(name);
cssText.push(':');
cssText.push(val);
cssText.push(';');
};
};
};
cssText = cssText.join('');
elem['${cloneName}'] = className = 'clone' + (new Date).getTime();
this._addHeadStyle('.' + className + '{' + cssText + '}');
return className;
},
// 向页头插入样式
_addHeadStyle: function (content) {
var style = this._style[document];
if (!style) {
style = this._style[document] = document.createElement('style');
document.getElementsByTagName('head')[0].appendChild(style);
};
style.styleSheet && (style.styleSheet.cssText += content) || style.appendChild(document.createTextNode(content));
},
_style: {},
// 获取最终样式
_getStyle: 'getComputedStyle' in window ? function (elem, name) {
return getComputedStyle(elem, null)[name];
} : function (elem, name) {
return elem.currentStyle[name];
},
// 获取光标在文本框的位置
_getFocus: function (elem) {
var index = 0;
if (document.selection) {// IE Support
elem.focus();
var Sel = document.selection.createRange();
if (elem.nodeName === 'TEXTAREA') {//textarea
var Sel2 = Sel.duplicate();
Sel2.moveToElementText(elem);
var index = -1;
while (Sel2.inRange(Sel)) {
Sel2.moveStart('character');
index++;
};
}
else if (elem.nodeName === 'INPUT') {// input
Sel.moveStart('character', -elem.value.length);
index = Sel.text.length;
}
}
else if (elem.selectionStart || elem.selectionStart == '0') { // Firefox support
index = elem.selectionStart;
}
return (index);
},
// 获取元素在页面中位置
_offset: function (elem) {
var box = elem.getBoundingClientRect(), doc = elem.ownerDocument, body = doc.body, docElem = doc.documentElement;
var clientTop = docElem.clientTop || body.clientTop || 0, clientLeft = docElem.clientLeft || body.clientLeft || 0;
var top = box.top + (self.pageYOffset || docElem.scrollTop) - clientTop, left = box.left + (self.pageXOffset || docElem.scrollLeft) - clientLeft;
return {
left: left,
top: top,
right: left + box.width,
bottom: top + box.height
};
}
};
function getPosition(ctrl) {
var p = kingwolfofsky.getInputPositon(ctrl);
document.getElementById('show').style.left = p.left + "px";
document.getElementById('show').style.top = p.bottom + "px";
}
</script>
<script type="text/javascript">
function show(elem) {
var p = kingwolfofsky.getInputPositon(elem);
var s = document.getElementById('show');
s.style.top = p.bottom+'px';
s.style.left = p.left + 'px';
s.style.display = 'inherit';
}
</script>
</head>
<body>
<textarea id="text" onkeyup="show(this)" style="width: 340px; height: 210px;"></textarea>
<br />
<input type="text" onkeyup="show(this)" style="width: 340px;" />
<div id="show" style="width: 34px; height: 13px; background: #eee; position: absolute;border:1px solid grey;font-size:13px; display:none;">Tips</div>
</body>
</html>
相关推荐
这个需求可以通过JavaScript实现，具体来说，就是获取光标（鼠标指针）的像素坐标。在百度统计中的热点图就是一个典型的例子，它通过记录用户在页面上的鼠标移动来收集数据，进而生成用户行为的热点区域。 要实现这...
Edit Grid限制编辑 ...JavaScript获取文本框光标的像素位置 js函数match、exec、test、search、replace、split使用介绍 技巧：Javascript使用隐藏的new来创建对象 禁止页面全选复制，兼容多种浏览器
`getStyle`函数用于获取元素的CSS属性值，考虑到在某些情况下高度可能以非像素单位表示，需要进行转换。 `minHeight`变量存储了初始高度，然后将文本框的`resize`属性设置为`none`，以禁用用户的手动调整。接下来，...
文本框光标定位 ```javascript function cc(){ var e = event.srcElement; var r = e.createTextRange(); r.moveStart("character", e.value.length); r.collapse(true); r.select(); } ``` 当文本框获得...
设置光标位置到文本框末尾，可以使用`toEnd()`函数，结合`TextRange`对象实现。屏蔽特定功能键，如Shift、Alt、Ctrl，可以监听`event.shiftKey`等属性。 对于页面布局，`<body scroll="no">`可以禁用滚动条，而`...
- **功能说明**：创建一个文本框，文本框的边框为1像素实线、颜色为#666666，高度为17像素，宽度为15个字符宽，字体大小为9pt，背景色为#F4F4FF，文字颜色为#ff6600。 #### 6. 平面输入框 - **样式设置**：通过CSS...
这里通过`onFocus`事件自动选中文本框中的内容，`onMouseOver`事件则确保光标聚焦。 #### 14. 显示文档最后修改日期 为了显示文档的最后修改日期，可以使用以下脚本： ```javascript function showLastModified...
- **`onBlur` 事件**: 当用户将光标从文本框移开时触发。通常用于在用户离开文本框之前检查或保存数据。 - **`onFocus` 事件**: 当文本框获得焦点时触发。常用来执行某些初始化操作或者视觉提示，比如清除默认提示...
文本框的OnFocus（B）事件发生在用户将光标定位到文本框时。空链接的创建方法是在属性面板中输入#（B）。文本域属性的初始值（D）可以设置CSS样式。制作网站效果图常使用JPEG（C）格式，因为它具有良好的压缩比和...
然而，这种做法可能在使用JavaScript拖动层等交互操作时出现bug，如光标闪烁等现象。因此，在使用这种特殊技巧时需要谨慎，并确保在不影响其他功能的前提下使用。 总结来说，当遇到绝对定位元素设置了高度和宽度...
**复选框**用于多项选择，**单选按钮**用于单个选项选择，**提交按钮**用于提交表单数据，而**滚动文本框**则允许用户输入大量文本，如评论或建议。 3. **发布站点**：在网页设计中，发布站点通常通过**文件**菜单...