首页 新闻 搜索 专区 学院

wpf下用webkitdotnet,页面中的输入框不显示光标(插入符号caret)。

0
悬赏园豆:10 [已关闭问题] 关闭于 2012-07-20 09:52

wpf下,用了windowsformshost控件,再嵌入webkitdotnet(这个:http://webkitdotnet.sourceforge.net/)。

页面中的所有输入框都不显示光标了(闪烁的那个光标,即插入符号,caret)。

貌似所有页面元素都没有获取焦点时的外观样式了。

在winform下使用webkitdotnet则正常。

这个跟焦点有关么?怎么才能让页面的输入框显示caret?

项目中用了wpf的很多动画效果,所以现在不太可能改成winform的了。

宁涛的主页 宁涛 | 菜鸟二级 | 园豆:348
提问于:2012-07-16 14:12
< >
分享
所有回答(4)
0

html实现:

  1 //==================== 自绘光标开始 =======================
  2 // 自绘光标说明:
  3 // 以下语句请放到body末尾,确保html元素加载完后执行。
  4 // 测试中光标颜色为红色,请把下面的red改为black。
  5 // 搜索框中,font-size需指定,单位px。空则默认为12px。
  6 // 搜索框需要限定字符数,若字符数超过宽度且显示不全时,则光标位置不准确。
  7 // 搜索框需要添加几个事件用来自绘光标。用法示例如下:
  8 /*
  9 <input id="textWithCaret" type="text" value="" 
 10 onfocus="isCaretBlink=true;" onblur="isCaretBlink=false;" 
 11 onpropertychange="caretMove(this);" onkeyup="caretMove(this);" onclick="caretMove(this);" 
 12 style="font-size:32px;"/>
 13 */
 14 
 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 function caretBlink(){
 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<textInputs.length; ++i){
 46   if("text"==textInputs[i].type){
 47     // 焦点事件,显示或隐藏光标
 48     //textInputs[i].attachEvent("click", function(){ alert("click"); } );
 49     //textInputs[i].addEventListener("click", function(){ alert("click"); } );
 50     textInputs[i].setAttribute("onfocus", function(){ isCaretBlink = true; });
 51     textInputs[i].setAttribute("onblur", function(){ isCaretBlink = false; });
 52     // 字符数改变,移动光标
 53     textInputs[i].setAttribute("onpropertychange", function(obj){
 54       return function(){
 55         caretMove(obj);
 56       }
 57     }(textInputs[i]));
 58     // 鼠标按下或键盘弹起,光标也可能改变
 59     textInputs[i].setAttribute("onmousedown", function(obj){
 60       return function(){
 61         caretMove(obj);
 62       }
 63     }(textInputs[i]));
 64     textInputs[i].setAttribute("onkeyup", function(obj){
 65       return function(){
 66         caretMove(obj);
 67       }
 68     }(textInputs[i]));
 69   }
 70 }
 71 */
 72 
 73 // 移动光标
 74 function caretMove(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 function getCaretPosition(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   return caretPosition;
 93 }
 94 // 获取光标索引位置
 95 function getCaretIndex(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   return caretIndex;
114 }
115 // 获取元素
116 function $id(id) { return document.getElementById(id); }
117 //==================== 自绘光标结束 =======================
宁涛 | 园豆:348 (菜鸟二级) | 2012-07-20 09:51

这个方法可以在html页面的输入框中显示光标,但是webkitdotnet加载的网页,如百度首页的输入框光标还是无法显示,不知道博主是怎么解决的?

找了好几天,也没解决这个问题,请赐教!不胜感激!

支持(0) 反对(0) guilin_ | 园豆:202 (菜鸟二级) | 2014-06-13 09:08

博主,求解答,不知道你有没有好的办法?

支持(0) 反对(0) guilin_ | 园豆:202 (菜鸟二级) | 2014-06-16 15:15
0

博主,这个问题解决没?我也遇到类似问题

guilin_ | 园豆:202 (菜鸟二级) | 2014-06-03 15:39
0

博主,这个问题解决没?我也遇到类似问题

夜夜笙歌c | 园豆:202 (菜鸟二级) | 2015-03-18 08:14
0

他山界面,嵌入GECKO 22.0,光标问题主要是要处理WM_ACTIVE,具体可参考他山界面DEMO源码

ylx | 园豆:202 (菜鸟二级) | 2017-02-27 20:19
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册