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中如何设置readOnly的值
Dec 25 Javascript
Node.js开发之访问Redis数据库教程
Jan 14 Javascript
AngularJs  Creating Services详解及示例代码
Sep 02 Javascript
Bootstrap字体图标无法正常显示的解决方法
Oct 08 Javascript
ES6生成器用法实例分析
Apr 10 Javascript
Vue响应式原理详解
Apr 18 Javascript
利用vue重构有赞商城的思路以及总结整理
Feb 21 Javascript
layui实现三级联动效果
Jul 26 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
Aug 29 Javascript
Node.js API详解之 vm模块用法实例分析
May 27 Javascript
JS自定义右键菜单实现代码解析
Jul 16 Javascript
基于VSCode调试网页JavaScript代码过程详解
Jul 20 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数据库配置文件一般做法分享
2012/07/07 PHP
Apache中php.ini的设置方法
2013/02/28 PHP
php集成环境xampp中apache无法启动问题解决方案
2014/11/18 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
javascript 数据类型转换(parseInt,parseFloat)
2010/07/20 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
2013/05/08 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
2014/04/15 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
2014/05/11 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
2017/08/03 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
js+css实现红包雨效果
2018/07/12 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
一百行JS代码实现一个校验工具
2019/04/30 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
python入门之语句(if语句、while语句、for语句)
2015/01/19 Python
python实现清屏的方法
2015/04/30 Python
Python中的lstrip()方法使用简介
2015/05/19 Python
深入理解Django中内置的用户认证
2017/10/06 Python
[原创]Python入门教程3. 列表基本操作【定义、运算、常用函数】
2018/10/30 Python
一行python实现树形结构的方法
2019/08/09 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
HTML5等待加载动画效果
2017/07/27 HTML / CSS
医护人员英文求职信范文
2013/11/26 职场文书
最新的互联网创业计划书
2014/01/10 职场文书
施工材料员岗位职责
2014/02/12 职场文书
大学生在校学习的自我评价
2014/02/18 职场文书
关于孝道的演讲稿
2014/05/21 职场文书
纪检干部现实表现材料
2014/08/21 职场文书
学校领导四风问题整改措施思想汇报
2014/10/09 职场文书
八年级英语教学计划
2015/01/23 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书
DjangoRestFramework 使用 simpleJWT 登陆认证完整记录
2021/06/22 Python