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

最新推荐文章于 2023-11-07 10:10:23 发布
最新推荐文章于 2023-11-07 10:10:23 发布
阅读量1.6k 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/youtianxia/p/3884314.html
版权
  • 一款实用的网页特效，点击按钮在文本框中插入文字，特别是在一些需要输入文字的地方尤其适用，可减少用户输入的麻烦，只需点击一下对应的按钮，即可把文字插入到文本框的指定位置，不过目前来说，本代码不算完善，有一些小的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>

 

转载于:https://www.cnblogs.com/youtianxia/p/3884314.html

weixin_30908103
关注
python输入文字点击按钮_Python（Tkinter）单击按钮使文本显示在输入框中？
weixin_39896256的博客
11-25 2197
我试图让文本出现在我的GUI应用程序的一个输入框，当一个按钮被按下。其目的是当按下一个按钮时，教科书中会出现一些已定义的文本，当按下另一个按钮时，上一个输入框被清除，不同的文本被插入到同一个输入框中。在我是Python新手，因此不确定如何做到这一点？到目前为止，我有三个按钮来显示不同的文本，每个按钮在GUI中显示为文本，而不是单独文本框中的文本。有人能帮忙吗？以下是我当前的代码：`*******前...
QT 源码 向文本框中插入文本，一次一行 比较简单
10-02
QT 源码 向文本框中插入文本，一次一行 比较简单。程序比较简单，但是，以小见大，你可以发现QT中界面设计都是一样的，
点击按钮根据光标位置插入内容
小白变怪兽
06-24 530
光标处插入内容
点击按钮自动生成txt文本 内容可以自己配置
最新发布
weixin_60700622的博客
11-07 174
以上就完成了点击按钮生成文本的功能了.
点击按钮，在input框在光标位置插入文字，系列问题待解决
Yoyo_Yan的博客
03-01 2696
想制作一个公式设计器，需要在文字的对应位置插入按钮对应的文字，效果如下： 遇到的问题： 1. 如何获取光标位置，并在对应位置插入内容 两种情况： （1）用户点击位置后，在光标位置插入内容 （2）用户选中几个字之后点击按钮进行文字替换 解决： selectionStart和selectionEnd可以获取到当前元素光标的起始位置。 //对应光标位置插入文字 insert(val) ...
js点击按钮后，增加文本框
weixin_30527423的博客
02-06 2317
静态html:<div class="box"> <input type="text" name="" id=""><span class="dj" style="width:20px;height: 20px;background: orange;margin-right: 10px;">&nbsp;+ &nbsp;</span&g...
可插入图片的TEXT文本框
09-04
点击“插入”按钮后，图片会被添加到文本框中。 值得注意的是，由于`contenteditable`属性的存在，用户在文本框中复制和粘贴图片也变得可能。这意味着用户可以将一个文本框中的图片和文字复制到另一个具有相同`...
js实现在文本框光标处添加字符的方法介绍
10-27
在JavaScript编程中，有时我们需要实现一个功能，即在用户输入的文本框（input[type="text"] 或 textarea）的光标位置动态插入特定字符。这在创建富文本编辑器、在线表单或者任何需要用户交互输入的场景中非常常见。...
PHPJquery点击按钮添加文本框
08-08
这段代码会在按钮被点击时，生成一个新的文本框，并将其添加到id为"textBoxContainer"的div中。 3. **PHP部分**：在这个例子中，PHP的作用可能不大，因为动态添加文本框主要是在客户端（浏览器）完成的。然而，...
Dreamweaver2018怎么快速插入文本框?
09-22
在使用Adobe Dreamweaver 2018（简称dw2018）这款强大的网页设计工具时，有时我们需要插入文本框来创建用户填写信息的表单或者展示特定文本内容。以下是一个详细的步骤教程，教你如何在Dreamweaver 2018中快速插入...
编写java程序，在文本框输入字符串，点击“添加”按钮，文本区显示文本框中内容；点击“清空”按钮，清除文本区所有内容
11-20
编写java程序，在文本框输入字符串，点击“添加”按钮，文本区显示文本框中内容；点击“清空”按钮，清除文本区所有内容。
html点击按钮自动填充内容,mui中点击按钮弹出层可供选择数据自动填充
weixin_30479445的博客
06-04 487
jsp调动职务label>选择职务font>span>div>i>span>选择职务h1>header>div>div>div>div>div>JSvar TempvalueArr=[];//存储li的valuevar TempnameArr=[];//存储li的name填充数据var msg = "";$.each(...
JS实现点击按钮添加输入框并输出值
热门推荐
qq_42583562的博客
12-29 2万+
【代码】JS实现点击按钮添加输入框并输出值。
点击按钮打开 输入的链接
天纵润泽
09-14 806
1、输出到框2.输出到新窗口的 拼凑网址   与asp在一起用 （自用）！！！ 
html中input按钮怎么添加超链接
weixin_30920091的博客
04-09 5406
比较完整的写法：<a href="链接"> 　　<input type=button onclick="window.location.href('连接')"></a>注：1.若直接在本页跳转到新的页面，则用： <input type=button onclick="window.location.href('连接')"> 　　2.如果需要打开一个...
input文本框中输入内容，将输入的内容通过点击“添加”按钮后添加到div中；点击添加的内容能随机改变其字体颜色
qq_56244419的博客
10-12 1213
在input文本框中输入要添加的文本,添加完成后点击添加的文本能改变其字体颜色,当鼠标点击另外一个文本的时候,第一个点击的文本能回复默认。点击添加的内容能随机改变其字体颜色。
【vue】获取光标位置，点击按钮插入文本标签
qq_42840080的博客
03-14 4141
获取光标位置，点击按钮插入文本标签 实现功能：文本框上方有一些标签按钮，点击标签按钮将对应的文本标签插入到文本框中，要求插入位置为鼠标点击位置。 vue部分 // An highlighted block <el-form-item> <el-input type="textarea" v-model="addForm.content" :rows="4" @blur="handleInputBlur" ref="inputArea" >
怎么在word对选中的文字插入文本框
05-04
在Word中，可以通过以下步骤将文本框插入到选中的文字中： 1. 首先选中你想要插入文本框的文字。 2. 在菜单栏中选择“插入”选项卡。 3. 在“文本”分组中，选择“文本框”选项。 4. 选择一个文本框样式，并点击...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值