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 相关文章推荐
鼠标图片振动代码
Jul 06 Javascript
javascript flash下fromCharCode和charCodeAt方法使用说明
Jan 12 Javascript
js判断浏览器类型为ie6时不执行
Jun 15 Javascript
Javascript中的关键字和保留字整理
Oct 16 Javascript
javascript实现字符串反转的方法
Feb 05 Javascript
ES6中非常实用的新特性介绍
Mar 10 Javascript
仿百度换肤功能的简单实例代码
Jul 11 Javascript
JavaScript实现动态添加Form表单元素的方法示例
Aug 14 Javascript
基于 Vue 实现一个酷炫的 menu插件
Nov 14 Javascript
Vue实现类似Spring官网图片滑动效果方法
Mar 01 Javascript
javascript 构建模块化开发过程解析
Sep 11 Javascript
vue实现匀速轮播效果
Jun 29 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 intval的测试代码发现问题
2008/07/27 PHP
ThinkPHP基本的增删查改操作实例教程
2014/08/22 PHP
php实现递归与无限分类的方法
2015/02/16 PHP
Gird事件机制初级读本
2007/03/10 Javascript
js实现DIV的一些简单控制
2007/06/04 Javascript
Javascript入门学习资料收集整理篇
2008/07/06 Javascript
检测jQuery.js是否已加载的判断代码
2011/05/20 Javascript
在JavaScript中判断整型的N种方法示例介绍
2014/06/18 Javascript
javascript制作游戏开发碰撞检测的封装代码
2015/03/31 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
老生常谈javascript变量的命名规范和注释
2016/09/29 Javascript
vue.js入门(3)——详解组件通信
2016/12/02 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
详解js的六大数据类型
2016/12/27 Javascript
Vue 去除路径中的#号
2018/04/19 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
2019/09/25 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
2019/10/20 Javascript
用Python写的图片蜘蛛人代码
2012/08/27 Python
TensorFlow损失函数专题详解
2018/04/26 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
Python自动化之UnitTest框架实战记录
2020/09/08 Python
Pyecharts 中Geo函数常用参数的用法说明
2021/02/01 Python
Python操作Excel的学习笔记
2021/02/18 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
利用CSS3制作简单的3d半透明立方体图片展示
2017/03/25 HTML / CSS
浅析HTML5页面元素及属性
2021/01/20 HTML / CSS
跑鞋、网球鞋、网球拍、服装及装备:Holabird Sports
2016/09/19 全球购物
工业学校毕业生自荐信范文
2014/01/03 职场文书
草船借箭教学反思
2014/02/03 职场文书
房屋租赁意向书
2014/04/01 职场文书
餐厅周年庆活动方案
2014/08/25 职场文书
个人工作作风整改措施思想汇报
2014/10/13 职场文书
员工自我评价范文
2015/03/11 职场文书
Nginx下配置Https证书详细过程
2021/04/01 Servers
详解Python小数据池和代码块缓存机制
2021/04/07 Python
python游戏开发之pygame实现接球小游戏
2022/04/22 Python