Jquery实现点击按钮,连续地向textarea中添加值的实例代码


Posted in Javascript onMarch 08, 2014

代码如下:

<%@ page language="java" contentType="text/html; charset=gbk"
    pageEncoding="gbk"%>
    <%@ include file="/pages/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
        $("input[id^='buttonValidate']").click(function(){  //当点击所有的id中包含'buttonValidate'的input标签时,执行函数
         var btnVal=$.trim($(this).val());//trim函数,去掉空格
         var str = $('#textareaValidate').val() + btnVal;//
         $('#textareaValidate').val(str);//
        });
   });
</script>
<title>Insert title here</title>
</head>
<body>
<form  id="form1" name="form1" action="" method="post">
<table  id ="table1" class="base_table" cellspacing="0"  border="1" style="border-collapse: collapse">
 <tr>
  <td >
  <textarea cols="75" rows="5" id="textareaValidate"></textarea>
  </td>
 </tr>
 <tr id="tr1">
  <td>
  <input id="buttonValidate1" type="button" value=" + "/> 
  <input id="buttonValidate2" type="button" value=" - "/> 
  <input id="buttonValidate3" type="button" value=" * "/>
  <input id="buttonValidate4" type="button" value=" / "/>     
  <input id="buttonValidate5" type="button" value=" ! "/>
  <input id="buttonValidate6" type="button" value=" = "/>
  <input id="buttonValidate7" type="button" value=" < "/>
  <input id="buttonValidate8" type="button" value=" > "/>      
  <input id="buttonValidate9" type="button" value=" & "/>
  <input id="buttonValidate10" type="button" value=" | "/>
  <input id="buttonValidate11" type="button" value=" ( "/>
  <input id="buttonValidate12" type="button" value=" ) "/>
  </td>
 </tr>
</table>
</form>
</body>
</html>

以上实现的功能:点击+,则把+添加到textarea中,点击-,则把-添加到textarea中;

如图:
Jquery实现点击按钮,连续地向textarea中添加值的实例代码

Javascript 相关文章推荐
用js做一个小游戏平台 (一)
Dec 29 Javascript
jquery 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
Jan 16 Javascript
JQuery 控制内容长度超出规定长度显示省略号
May 23 Javascript
javascript验证邮件地址和MX记录的方法
Jun 16 Javascript
jQuery焦点图切换特效代码分享
Sep 15 Javascript
jquery获取复选框checkbox的值的简单实现方法
May 26 Javascript
原生JS实现首页进度加载动画
Sep 14 Javascript
vue.js加载新的内容(实例代码)
Jun 01 Javascript
解决Vue页面固定滚动位置的处理办法
Jul 13 Javascript
Vue常用的几个指令附完整案例
Nov 06 Javascript
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
js中的onchange和onpropertychange (onchange无效的解决方法)
Mar 08 #Javascript
JS实现鼠标单击与双击事件共存
Mar 08 #Javascript
js触发onchange事件的方法说明
Mar 08 #Javascript
关于onchange事件在IE和FF下的表现及解决方法
Mar 08 #Javascript
javascript中的事件代理初探
Mar 08 #Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
Mar 08 #Javascript
Extjs表单常见验证小结
Mar 07 #Javascript
You might like
用PHP将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
PHP stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
php 变量未定义等错误的解决方法
2011/01/12 PHP
PHP往XML中添加节点的方法
2015/03/12 PHP
JS 字符串连接[性能比较]
2009/05/10 Javascript
Javascript Math ceil()、floor()、round()三个函数的区别
2010/03/09 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
2011/07/31 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
2013/06/04 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
2013/12/05 Javascript
详解AngularJS中ng-src指令的使用
2016/09/07 Javascript
浅谈AngularJs指令之scope属性详解
2016/10/24 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
vue+koa2实现session、token登陆状态验证的示例
2019/08/30 Javascript
JS原型和原型链原理与用法实例详解
2020/02/05 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
python下如何让web元素的生成更简单的分析
2008/07/17 Python
Python实现文件复制删除
2016/04/19 Python
python pandas 时间日期的处理实现
2019/07/30 Python
Python 打印自己设计的字体的实例讲解
2021/01/04 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
Vilebrequin欧洲官网:法国豪华泳装品牌(男士沙滩裤)
2018/04/14 全球购物
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
制衣厂各岗位职责
2013/12/02 职场文书
家长建议怎么写
2014/05/15 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
幼儿园2014年度工作总结
2014/11/10 职场文书
2015年教师见习期工作总结
2015/05/20 职场文书
正规欠条模板
2015/07/03 职场文书
推普标语口号大全
2015/12/26 职场文书
党员读书活动心得体会
2016/01/14 职场文书
九不准学习心得体会
2016/01/23 职场文书
python第三方网页解析器 lxml 扩展库与 xpath 的使用方法
2021/04/06 Python
redis数据一致性的实现示例
2022/03/18 Redis
英国数字版游戏销量周榜公布 《小缇娜的奇幻之地》登顶
2022/04/03 其他游戏
Python使用永中文档转换服务
2022/05/06 Python