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 相关文章推荐
ExtJs使用IFrame的实现代码
Mar 24 Javascript
js 判断一个元素是否在页面中存在
Dec 27 Javascript
使用js对select动态添加和删除OPTION示例代码
Aug 12 Javascript
简单的两种Extjs formpanel加载数据的方式
Nov 09 Javascript
input禁止键盘及中文输入,但可以点击
Feb 13 Javascript
jQuery操作JSON的CRUD用法实例
Feb 25 Javascript
JavaScript表单验证实例之验证表单项是否为空
Jan 10 Javascript
jQuery css() 方法动态修改CSS属性
Sep 25 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
Jun 20 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
Jul 19 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
Apr 26 Javascript
优化Vue项目编译文件大小的方法步骤
May 27 Javascript
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旋转图片90度的方法
2013/11/07 PHP
php实现检查文章是否被百度收录
2015/01/27 PHP
PHP命名空间(namespace)原理与用法详解
2019/12/11 PHP
javascript 设置文本框中焦点的位置
2009/11/20 Javascript
js模仿jquery的写法示例代码
2013/06/16 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
2016/06/21 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
第一次动手实现bootstrap table分页效果
2016/09/22 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
2017/07/20 Javascript
jquery 键盘事件的使用方法详解
2017/09/13 jQuery
element 结合vue 在表单验证时有值却提示错误的解决办法
2018/01/22 Javascript
VUE+Element环境搭建与安装的方法步骤
2019/01/24 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
vue3.0实现点击切换验证码(组件)及校验
2020/11/18 Vue.js
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
使用TensorFlow实现SVM
2018/09/06 Python
python实现爬山算法的思路详解
2019/04/09 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
HTML5 input placeholder 颜色修改示例
2014/05/30 HTML / CSS
英国快时尚女装购物网站:PrettyLittleThing
2018/08/15 全球购物
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
食品营养与检测应届生求职信
2013/11/08 职场文书
学生思想表现的评语
2014/01/30 职场文书
就业协议书的作用
2014/04/11 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
北京导游词
2015/02/12 职场文书
审查起诉阶段律师意见书
2015/05/19 职场文书
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python