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

  • 一款实用的网页特效,点击按钮在文本框中插入文字,特别是在一些需要输入文字的地方尤其适用,可减少用户输入的麻烦,只需点击一下对应的按钮,即可把文字插入到文本框的指定位置,不过目前来说,本代码不算完善,有一些小的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>

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

时间: 2024-08-24 07:31:42

点击按钮插入文字在文本框的相关文章

JQuery实现点击按钮动态添加input文本框,限制个数

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title> <script src="jquery-min.js" type="text/javascript"></script><script type=&

点击使文字变文本框且可编辑的JS

模仿QQ空间布局时,为了模拟好友分组编辑部分,大量搜集js代码,经过多重比较和修改,终于提炼到了我目前为止遇到的比较实用的脚本了,其中我中意的优点:无需id定义,只定义类就可以,,代码简便,尤其适用后台,因为,朋友已成功运用于后台交互中,先提供代码,做个标记(PS:忘记从哪里下载的JS源码,但十分感谢作者大神...感谢...) <script>$(function() { //获取class为caname的元素 $(".t2").click(function() { var

004-实现点击任意屏幕上非文本框点移除键盘

实现点击任意屏幕上非文本框点移除键盘 我们在开发的过程中若要实现此功能只要将下面这些代码拷贝到你要实现的项目里面就可以实现此功能. 代码如下: - (void)viewDidLoad { [super viewDidLoad]; [self setUpForDismissKeyboard]; } - (void)setUpForDismissKeyboard { NSNotificationCenter *nc = [NSNotificationCenter defaultCenter]; UI

做一个计时器示例 在页面上有一个文本框和一个普通按钮 在状态栏上显示,单击按钮,开始计时的提示信息 单击按钮时,在文本框显示计数的过程,同时要求按钮上的字,显示为“单击暂停” 此时单击按钮,暂停计时,同时按钮上的字显示为“继续计时”,要求这两种状态来回切换,来完成计数器的功能

2015-04-12 20:15:25 方法一; <script> var s=0; var timeout=0; status='点击按钮,开始计时'; function count(){ s++; time1.value=s; timeout=setTimeout('count();',100); } function onChange(){ if(timeout==0){ count(); time2.value='暂停计时'; status='点击按钮,暂停计时'; }else{ cl

在页面上点击按钮,出现弹出框

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title&

Jsp页面用table表格来让文字和文本框对齐

1, border="0" cellpadding="0" cellspacing="20", 第一个是页边距要设置0,第二个是用来指定单元格内容与单元格边界之间的空白距离的大小,第三个是外边距为20(就是行和行之间的间距) <div id="tt" class="easyui-tabs"> <div title="基本信息"> <table align =

JS实现点击按钮实现文字变大变小

<!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"><head><meta http-equiv="Content-Typ

Java 添加Word文本框

在Word中,文本框是指一种可移动.可调节大小的文字或图形容器.我们可以向文本框中添加文字.图片.表格等对象,下面,将通过Java编程来实现添加以上对象到Word文本框. 使用工具:Free Spire.Doc for Java (免费版) Jar文件获取及导入: 方法1:通过官网下载获取jar包.下载后,解压文件,并将lib文件夹下的Spire.Doc.jar文件导入Java程序.(如下图) 方法2:通过maven仓库安装导入. Java代码示例 import com.spire.doc.*;

Jquery实现点击文字后变成文本框,修改发送后台保存

本文实现以下几个功能: 1.点击文字变为文本框 ,并选中文字2.对文本框内容进行修改3.点击文本框以外的地方文本框再次变为修改后的文字,如果是删除文字,显示默认提示文字4. 同步更新SQL数据库内容 首先是HTML模板部分: 1 <{if !empty($img_list)}> 2 <{foreach $img_list as $kk=>$vv}> 3 <div class="item-box radius3"> 4 <a href=&q