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)文章
jQuery Validation插件remote驗證方式的Bug解決
jQuery插件很多,其中一個重要的插件便是jQuery Validation,它的作用是對表單進行驗證,還上了jQuery官網(wǎng)。2010-07-07利用jquery實現(xiàn)驗證輸入的是否是數(shù)字、小數(shù),包含保留幾位小數(shù)
本文主要介紹了利用jquery實現(xiàn)驗證輸入的是否是數(shù)字、小數(shù),包含保留幾位小數(shù),代碼清晰,容易理解。有需要的朋友可以參考下2016-12-12