您的位置：首页 > 其它

点击按钮插入文字在文本框

2014-08-01 10:22 267 查看
一款实用的网页特效，点击按钮在文本框中插入文字，特别是在一些需要输入文字的地方尤其适用，可减少用户输入的麻烦，只需点击一下对应的按钮，即可把文字插入到文本框的指定位置，不过目前来说，本代码不算完善，有一些小的Bug希望高手们帮忙修正哦。

<!doctype html>
<html>
<head>
<title>点击按钮插入文字</title>
<script language="javascript">
//移动光标到最后
var setPos=function(o){
if(o.setSelectionRange){//W3C
setTimeout(function(){
o.setSelectionRange(o.value.length,o.value.length);
o.focus();
},0);
}else if(o.createTextRange){//IE
var textRange=o.createTextRange();
textRange.moveStart("character",o.value.length);
textRange.moveEnd("character",0);
textRange.select();
}
};
function Insert(str) {
var obj = document.getElementById('content');
setPos(obj);
if(document.selection) {
obj.focus();
var sel=document.selection.createRange();
document.selection.empty();
sel.text = str;
} else {
var prefix, main, suffix;
prefix = obj.value.substring(0, obj.selectionStart);
main = obj.value.substring(obj.selectionStart, obj.selectionEnd);
suffix = obj.value.substring(obj.selectionEnd);
obj.value = prefix + str + suffix;
}
obj.focus();
}

</script>
</head>
<body>
<table width="630" height="55" border="0" cellpadding="0" cellspacing="0">
<tr><td>

<label>
<textarea id="content" name="textarea" style="width:500px; height:120px;"></textarea>
</label>

</td></tr>
<tr>
<td width="567" align="left" >
<input  type="button" style="cursor:hand" onclick="javascript:Insert('急')" value="急 " />
<input  type="button" style="cursor:hand" onclick="javascript:Insert('发')" value="发 " />
<input  type="button" style="cursor:hand" onclick="javascript:Insert('求')" value="求 " />
<input  type="button" style="cursor:hand" onclick="javascript:Insert('回')" value="回 " />
<input  type="button" style="cursor:hand" onclick="javascript:Insert('货')" value="货 " />
<input  type="button" style="cursor:hand" onclick="javascript:Insert('至')" value="至 " />
<input  type="button" style="cursor:hand" onclick="javascript:Insert('车')" value="车 " />
<input  type="button" style="cursor:hand" onclick="javascript:Insert('到')" value="到 " />
<input  type="button" style="cursor:hand" onclick="javascript:Insert('要')" value="要 " />
<input  type="button" style="cursor:hand" onclick="javascript:Insert('在')" value="在 " />
<input  type="button" style="cursor:hand" onclick="javascript:Insert('剩')" value="剩 " />
<input  type="button" style="cursor:hand" onclick="javascript:Insert('空')" value="空 " />
<input  type="button" style="cursor:hand" onclick="javascript:Insert('装')" value="装 " />
<input  type="button" style="cursor:hand" onclick="javascript:Insert('占')" value="占 " />
<input  type="button" style="cursor:hand" onclick="javascript:Insert('或')" value="或 " />
<input  type="button" style="cursor:hand" onclick="javascript:Insert('节')" value="节 " />
<input  type="button" style="cursor:hand" onclick="javascript:Insert('大')" value="大 " />
<input  type="button" style="cursor:hand" onclick="javascript:Insert('小')" value="小 " />
<input  type="button" style="cursor:hand" onclick="javascript:Insert('卸')" value="卸 " />

</td>
</tr>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航