jQuery文本輸入按鈕單擊更改

Question

我在該站點中使用了幾個線程，並為ie的selectionStart和selectionEnd工作修復了其他線程，並決定從該站點實現代碼。

在簡單的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>

這是一個小提琴鏈接

Answer 1

您選擇從其獲取站點代碼的過程並非萬無一失。 此外，在IE中，通常需要先處理輸入（使用其focus()方法），然后再處理插入符號或選擇位置。

我建議使用自己的jQuery插件來處理文本輸入和textarea選擇。 這是我所知道的唯一在IE <9中100％正確運行的代碼。

jQuery文本輸入按鈕單擊更改

問題描述

1 個解決方案

解決方案1
0 2011-09-01 15:57:11

jQuery文本輸入按鈕單擊更改

問題描述

1 個解決方案

解決方案1 0 2011-09-01 15:57:11

解決方案1
0 2011-09-01 15:57:11