1、新建并保存一个html文档，进入html代码编辑页面。
2、写一个input文本输入框，并定义ID，然后写一个按钮，并定义ID。
3、要做的效果就是点击按钮为输入框赋值，然后把输入框和按钮的css样式写好，不写样式也可以。
4、引入jquery文件，路径要正确，写jquery代码，打开浏览器测试一下，点击按钮之后，输入框内就会自动输入赋值的内容。
//这是获取文本光标位置的jquery插件<script type="text/javascript">
$.fn.extend({
getposition:function( value ){
var elem = this[0]
if (elem&&(elem.tagName=="TEXTAREA"||elem.type.toLowerCase()=="text")) {
if($.browser.msie){
var rng
if(elem.tagName == "TEXTAREA"){
rng = event.srcElement.createTextRange()
rng.moveToPoint(event.x,event.y)
}else{
rng = document.selection.createRange()
}
if( value === undefined ){
rng.moveStart("character",-event.srcElement.value.length)
return rng.text.length
}else if(typeof value === "number" ){
var index=this.position()
index>value?( rng.moveEnd("character",value-index)):(rng.moveStart("character",value-index))
rng.select()
}
}else{
if( value === undefined ){
return elem.selectionStart
}else if(typeof value === "number" ){
elem.selectionEnd = value
elem.selectionStart = value
}
}
}else{
if( value === undefined )
return undefined
}
}
})
</script>
// jquery代码
<script language="JavaScript" type="text/javascript">
$(function(){
$(".text").blur(function(){
$(this).attr('num',$(this).getposition()) //文本框失去焦点时给自定义属性num赋值，用来获取光标位置
})
$(".btn").click(function(){
var num = $(".text").attr("num")//获得光标位置
var text = $(".text").val()//文本值
if(num === undefined)//判断文本框是否以获取焦点，如果没有获取就插入到最后
num = text.length
var text1 = text.substring(0,num)//获得光标前面的文本
var text2 = text.substring(num,text.length)//获得光标后面的文本
var newtext = text1 + $(this).val() + text2//与按钮值拼成新的字符串
$(".text").val(newtext)//给文本框赋值
$(".text").focus()//文本框获取焦点
num = Number(num) + Number($(this).val().length)
$(".text").getposition(num)//重新设置光标位置
})
})
</script>
//html 代码
<body>
<input type="text" class="text" value="我是文本框原来的值"/>
<input name="" class="btn" value="btn1" type="button" />
<input name="" class="btn" value="btn2" type="button" />
</body>
可能还有不足，你完善一下吧
<style>.line div {display:inline-block}
</style>
<button id=btn type=button>按钮</button>
<div id=res></div>
<script>
$(function(){
$("#btn").one("click",function(){
$("#res").append("<div id=tab></div>")
var btn1=$("<button type=button>添加</button>")
btn1.click(addline)
$("#res").append(btn1)
var btn2=$("<button type=button>减少</button>")
btn2.click(delline)
$("#res").append(btn2)
addline()
function addline(){
var n=$(".line").size()+1
$("#tab").append("<div class=line><div>事件"+n+"<input type=text value=''/></div> <div>备注"+n+"<input type=text value=''/></div></div>")
}
function delline(){
$("#tab .line:last").remove()
}
})
})
</script>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）