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 相关文章推荐
javascript的onchange事件与jQuery的change()方法比较
Sep 28 Javascript
数组方法解决JS字符串连接性能问题有争议
Jan 12 Javascript
JS文本框不能输入空格验证方法
Mar 19 Javascript
javascript制作的网页侧边弹出框思路及实现代码
May 21 Javascript
在AngularJS框架中处理数据建模的方式解析
Mar 05 Javascript
jQuery中的deferred对象和extend方法详解
May 08 jQuery
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
页面点击小红心js实现代码
May 26 Javascript
react写一个select组件的实现代码
Apr 03 Javascript
实例详解vue中的$root和$parent
Apr 29 Javascript
使用jQuery实现掷骰子游戏
Oct 24 jQuery
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
十大催泪虐心动漫,你能坚持看到第几部?
2020/03/04 日漫
dede3.1分页文字采集过滤规则详说(图文教程)
2007/04/03 PHP
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
PHP @ at 记号的作用示例介绍
2014/10/10 PHP
为PHP安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
PHP中的Streams详细介绍
2014/11/12 PHP
PHP函数nl2br()与自定义函数nl2p()换行用法分析
2016/04/02 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
jQuery操作input type=radio的实现代码
2012/06/14 Javascript
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
javascript瀑布流式图片懒加载实例
2020/06/28 Javascript
js仿淘宝和百度文库的评分功能
2016/05/15 Javascript
AngularJs入门教程之环境搭建+创建应用示例
2016/11/01 Javascript
nodejs进阶(6)—连接MySQL数据库示例
2017/01/07 NodeJs
详解在Angularjs中ui-sref和$state.go如何传递参数
2017/04/24 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
2020/12/15 Vue.js
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
利用python将图片转换成excel文档格式
2017/12/30 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
在Qt中正确的设置窗体的背景图片的几种方法总结
2019/06/19 Python
使用Pandas对数据进行筛选和排序的实现
2019/07/29 Python
详解Python中的format格式化函数的使用方法
2019/11/20 Python
解决pyPdf和pyPdf2在合并pdf时出现异常的问题
2020/04/03 Python
Html5页面获取微信公众号的openid的方法
2020/05/12 HTML / CSS
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
综治维稳工作汇报
2014/10/27 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
病人慰问信范文
2015/02/15 职场文书
质量保证书格式
2015/02/27 职场文书
未婚证明格式
2015/06/15 职场文书
合作意向书怎么写
2019/06/24 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android
Flink 侧流输出源码示例解析
2022/09/23 Servers