jquery實現(xiàn)在光標位置插入內(nèi)容的方法
更新時間：2015年02月05日 16:38:14 作者：whazhl
這篇文章主要介紹了jquery實現(xiàn)在光標位置插入內(nèi)容的方法,涉及jQuery功能的擴展技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了jquery實現(xiàn)在光標位置插入內(nèi)容的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<title>無標題頁</title>
<script type="text/javascript" src="jquery-1.7.2.min。js"></script>
<script type="text/javascript">
(function ($) {
$.fn.extend({
insertAtCaret: function (myValue) {
var $t = $(this)[0];
if (document.selection) {
this.focus();
sel = document.selection.createRange();
sel.text = myValue;
this.focus();
} else
if ($t.selectionStart || $t.selectionStart == '0')
{
var startPos = $t.selectionStart;
var endPos = $t.selectionEnd;
var scrollTop = $t.scrollTop;
$t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos,$t.value.length);
this.focus();
$t.selectionStart = startPos + myValue.length;
$t.selectionEnd = startPos + myValue.length;
$t.scrollTop = scrollTop;
} else {
this.value += myValue;
this.focus();
}
}
})
})(jQuery);
$(document).ready(function () {
$("#numd").bind("mouseleave", function () {
document.getElementById('keybored').style.display = 'none';
document.getElementById('Nm').blur();
});
$("#Nm").focus(function () {
document.getElementById('keybored').style.display = '';
});
$(".readbtns").click(function () {
$("#Nm").insertAtCaret($(this).val());
});
});
</script>
</head>
<body>
<ul>
<li>
<input />
<div>
</div>
</li>
</ul>
<input id="hid" type="text" value="" style="display: none" />
<span id="numd" style="border: 1px solid red; clear: both; display: inline-block; font: 800em;">
<input type="text" id="Nm" name="Nm" value="" />
<div style="display: none; border: 1px solid #A2B4C6; width: 150px; height: 400px;"
id="keybored">
<input type="button" class="readbtns" value="1" />
<input type="button" class="readbtns" value="2" />
<input type="button" class="readbtns" value="3" />
<input type="button" class="readbtns" value="4" />
<input type="button" class="readbtns" value="5" />
<input type="button" class="readbtns" value="6" />
<input type="button" class="readbtns" value="7" />
<input type="button" class="readbtns" value="8" />
<input type="button" class="readbtns" value="9" />
</div>
</span>
</body>
</html>
<html>
<head>
<title>無標題頁</title>
<script type="text/javascript" src="jquery-1.7.2.min。js"></script>
<script type="text/javascript">
(function ($) {
$.fn.extend({
insertAtCaret: function (myValue) {
var $t = $(this)[0];
if (document.selection) {
this.focus();
sel = document.selection.createRange();
sel.text = myValue;
this.focus();
} else
if ($t.selectionStart || $t.selectionStart == '0')
{
var startPos = $t.selectionStart;
var endPos = $t.selectionEnd;
var scrollTop = $t.scrollTop;
$t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos,$t.value.length);
this.focus();
$t.selectionStart = startPos + myValue.length;
$t.selectionEnd = startPos + myValue.length;
$t.scrollTop = scrollTop;
} else {
this.value += myValue;
this.focus();
}
}
})
})(jQuery);
$(document).ready(function () {
$("#numd").bind("mouseleave", function () {
document.getElementById('keybored').style.display = 'none';
document.getElementById('Nm').blur();
});
$("#Nm").focus(function () {
document.getElementById('keybored').style.display = '';
});
$(".readbtns").click(function () {
$("#Nm").insertAtCaret($(this).val());
});
});
</script>
</head>
<body>
<ul>
<li>
<input />
<div>
</div>
</li>
</ul>
<input id="hid" type="text" value="" style="display: none" />
<span id="numd" style="border: 1px solid red; clear: both; display: inline-block; font: 800em;">
<input type="text" id="Nm" name="Nm" value="" />
<div style="display: none; border: 1px solid #A2B4C6; width: 150px; height: 400px;"
id="keybored">
<input type="button" class="readbtns" value="1" />
<input type="button" class="readbtns" value="2" />
<input type="button" class="readbtns" value="3" />
<input type="button" class="readbtns" value="4" />
<input type="button" class="readbtns" value="5" />
<input type="button" class="readbtns" value="6" />
<input type="button" class="readbtns" value="7" />
<input type="button" class="readbtns" value="8" />
<input type="button" class="readbtns" value="9" />
</div>
</span>
</body>
</html>
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
您可能感興趣的文章:
- 基于jQuery的輸入框在光標位置插入內(nèi)容, 并選中
- JQuery在光標位置插入內(nèi)容的實現(xiàn)代碼
- jQuery 在光標定位的地方插入文字的插件
- jQuery:節(jié)點(插入,復(fù)制,替換,刪除)操作
- 關(guān)于用Jquery的height()、width()計算動態(tài)插入的IMG標簽的寬高的問題
- JQuery插入DOM節(jié)點的方法
- jQuery實現(xiàn)在最后一個元素之前插入新元素的方法
- jquery插入兄弟節(jié)點的操作方法
- jQuery往textarea中光標所在位置插入文本的方法
- jQuery?在圖片和文字中插入內(nèi)容實例
相關(guān)文章
這篇文章主要介紹了關(guān)于jquery layui彈出層的使用方法,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了jQuery實現(xiàn)的表格展開伸縮效果,結(jié)合完整實例形式分析了jQuery響應(yīng)鼠標事件動態(tài)修改頁面元素的相關(guān)技巧,需要的朋友可以參考下2016-09-09![11款新鮮的jQuery插件[附所有demo下載]](http://img.jbzj.com/images/xgimg/bcimg2.png)
每天都會有新的jQuery插件誕生，這里和大家分享最新出爐的11款在實際項目中可能用到的jQuery插件，提供整理后的實例下載。2011-01-01
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)簡易計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
jQuery Validation插件remote驗證方式的Bug解決
jQuery插件很多，其中一個重要的插件便是jQuery Validation，它的作用是對表單進行驗證，還上了jQuery官網(wǎng)。2010-07-07
本文將介紹基于jquery庫的tab新形式使用,需要的朋友可以參考下2012-11-11
利用jquery實現(xiàn)驗證輸入的是否是數(shù)字、小數(shù)，包含保留幾位小數(shù)
本文主要介紹了利用jquery實現(xiàn)驗證輸入的是否是數(shù)字、小數(shù)，包含保留幾位小數(shù)，代碼清晰，容易理解。有需要的朋友可以參考下2016-12-12
這篇文章主要介紹了jquery獲取radio值實例,較為詳細的總結(jié)了通過jQuery獲取radio值的各種常用方法,需要的朋友可以參考下2014-10-10
寫JS實現(xiàn)拖動需要一大堆不便維護的代碼，實屬麻煩，Google了大半天，發(fā)現(xiàn)了一個優(yōu)秀的Jquery插件EasyDrag，只需要一行代碼便可輕松在主流瀏覽器上。2010-12-12
很久沒寫東西，年前的項目也接近尾聲，最近在網(wǎng)上看到一篇文章是 阮一峰 的 《jQuery最佳實踐》 鏈接在文末2012-03-03