2011-08-31 74 views
0

我在这个网站和其他人工作修复selectionStart和selectionEnd为ie,并决定从这个site实现代码。jquery文本输入更改按钮点击

在一个简单的html页面中,有多个文本区域具有公共类和唯一的id。有几个按钮用作虚拟键盘。在关注任何文本文件并单击按钮时,将在光标位置处将文本放入该元素中。如果选择的某些文本在Mozilla和Chrome中也可以正常工作。但问题在其他浏览器

歌剧 - 起搏文字是好的,但在选择,而不是替换文本它 添加到选择结束(即如果选择从右做出向左,然后在左边,反之亦然放置)。

ie8 - 行 无效参数`stored_range.moveToElementText(element);

整个代码看起来像下面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<title>selection test</title> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<script type='text/javascript' src='js/jquery-1.4.2.js'></script> 
<script> 

window.onload = function() { 

jQuery('.iptext').live('focus', function(event) { 
      holdFocus=$(this); 
      holdFocus=holdFocus[0];//this is required 
     }); 
jQuery('.addchar').live('click', function(event) { 
      // Get focused textfield 
      if(holdFocus==null) 
      { 

      } 
      else 
      { 
      var element =holdFocus; 
if(document.selection){ 
    // The current selection 
    var range = document.selection.createRange(); 
    // We'll use this as a 'dummy' 
    var stored_range = range.duplicate(); 
    // Select all text 
    stored_range.moveToElementText(element); 
    // Now move 'dummy' end point to end point of original range 
    stored_range.setEndPoint('EndToEnd', range); 
    // Now we can calculate start and end points 
    element.selectionStart = stored_range.text.length - range.text.length; 
    element.selectionEnd = element.selectionStart + range.text.length; 
} 
        $(holdFocus).val(
        $(holdFocus).val().substring(0, holdFocus.selectionStart)+ 
        $.trim($(this).text())+ 
        $(holdFocus).val().substring(holdFocus.selectionEnd) 
      ); 
      } 
     }); 
}; 
</script> 
<style type="text/css" media="screen"> 
body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; } 
ul {display:block;} 
li { list-style: none;display:inline-block;width:20px;height:20px;background-color:#808000;} 
ul li a {display:block;text-decoration:none; } 
</style> 
</head> 
<body> 
    <input type="text" id="txt1" class="iptext" autocomplete="off" value="Testing String"> 
    <input type="text" id="txt2" class="iptext" autocomplete="off" value="Testing String"> 
<ul> 
<li><a href="#" class="addchar">a</a></li> 
<li><a href="#" class="addchar">b </a></li> 
<li><a href="#" class="addchar">c</a></li> 
<li><a href="#" class="addchar">d </a></li> 

</ul> 


</body> 
</html> 

这是一个小提琴link

回答

0

从你选择把它从网站的代码也不是万无一失的。另外,在IE中,在处理插入符号或选择位置之前,通常需要关注输入(使用其方法focus())。

我建议my own jQuery plug-in用于处理文本输入和textarea选择。这是我所知道的唯一代码,在IE中可以100%正确工作< 9.