wpf 修改输入框光标_wpf下用webkitdotnet，页面中的输入框不显示光标（插入符号caret）。...

最新推荐文章于 2023-12-01 14:18:56 发布

茜茜丁

最新推荐文章于 2023-12-01 14:18:56 发布

阅读量354

点赞数

文章标签： wpf 修改输入框光标

本文链接：https://blog.csdn.net/weixin_34260787/article/details/111978562

版权

在WPF应用中使用WebKit.NET框架时，可能会遇到输入框不显示光标的问题。本文提供了一种自绘光标的方法，通过JavaScript实现光标的闪烁和移动效果，详细解释了相关代码及其工作原理。

摘要由CSDN通过智能技术生成

1 //==================== 自绘光标开始 =======================

2 //自绘光标说明：

3 //以下语句请放到body末尾，确保html元素加载完后执行。

4 //测试中光标颜色为红色，请把下面的red改为black。

5 //搜索框中，font-size需指定，单位px。空则默认为12px。

6 //搜索框需要限定字符数，若字符数超过宽度且显示不全时，则光标位置不准确。

7 //搜索框需要添加几个事件用来自绘光标。用法示例如下：

8 /*

9 13 */

15 //添加光标元素

16 var divCaret = document.createElement('div');17 divCaret.id = 'divCaret';18 divCaret.style.zIndex = 100;19 divCaret.style.position = 'absolute';20 divCaret.style.left = '0px';21 divCaret.style.top = '0px';22 divCaret.style.width = '2px';23 divCaret.style.height = '2px';24 document.body.appendChild(divCaret);25 //光标闪烁

26 var isCaretBlink = false;27 functioncaretBlink(){28 if(""==$id("divCaret").style.backgroundColor ){29 if(isCaretBlink){30 $id("divCaret").style.backgroundColor = "red";31 }32 }33 else{34 $id("divCaret").style.backgroundColor = "";35 }36 setTimeout("caretBlink()", 500);37 }38 caretBlink();39

40 /*

41 // 遍历文本框 ***js中附加触发事件无效，放弃该方法。删除即可***42 // setAttribute方法在IE下有效。addEventListener方法在chrome下有效。43 // setAttribute方法在webkitdotnet下会覆盖掉之前设置的触发事件，新设置的事件不会被触发。其他方法无效。44 var textInputs = document.getElementsByTagName("input");45 for(var i=0; i

73 //移动光标

74 functioncaretMove(obj){75 isCaretBlink=true;76 //光标的初始位置

77 var caretPosition =getCaretPosition(obj);78 var caretIndex =getCaretIndex(obj);79 $id("divCaret").style.left = (caretPosition.X + (caretIndex * parseInt(caretPosition.F) / 2)) + "px";80 $id("divCaret").style.top = caretPosition.Y + "px";81 $id("divCaret").style.height = caretPosition.H + "px";82 }83 //获取文本框光标位置等信息

84 functiongetCaretPosition(e){85 var caretPosition = {"X":e.offsetLeft, "Y":e.offsetTop, "W":(e.offsetWidth-4), "H":(e.offsetHeight-4), "F":e.style.fontSize || "12px"};86 while(e=e.offsetParent){87 caretPosition.X +=e.offsetLeft;88 caretPosition.Y +=e.offsetTop;89 }90 caretPosition.X += 2;91 caretPosition.Y += 2;92 returncaretPosition;93 }94 //获取光标索引位置

95 functiongetCaretIndex(e){96 var caretIndex = 0;97 //IE Support

98 if(document.selection) {99 //Set focus on the element

100 e.focus ();101 //To get cursor position, get empty selection range

102 var caretSel =document.selection.createRange ();103 //Move selection start to 0 position

104 caretSel.moveStart ('character', -e.value.length);105 //The caret position is selection length

106 caretIndex = caretSel.text.replace(/[^\x00-\xff]/ig, "xx").length;107 }108 //Firefox support & webkit

109 else if (e.selectionStart || e.selectionStart == '0'){110 //双字节字符转换为2个字符

111 caretIndex = e.value.substr(0, e.selectionStart).replace(/[^\x00-\xff]/ig, "xx").length;112 }113 returncaretIndex;114 }115 //获取元素

116 function $id(id) { returndocument.getElementById(id); }117 //==================== 自绘光标结束 =======================