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 学习笔记 错误处理
Jul 30 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
Apr 17 Javascript
浅析Node.js查找字符串功能
Sep 03 Javascript
js实现延时加载Flash的方法
Nov 26 Javascript
详解Javascript模板引擎mustache.js
Jan 20 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
详解如何在Javascript和Sass之间共享变量
Nov 13 Javascript
5分钟快速看懂ES6中的反射与代理
Dec 19 Javascript
JS控制下拉列表左右选择实例代码
May 08 Javascript
JavaScript中作用域链的概念及用途讲解
Aug 06 Javascript
Vue3中的Refs和Ref详情
Nov 11 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相当简单的分页类
2008/10/02 PHP
PHP实现数组递归转义的方法
2014/08/28 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
php常用字符串String函数实例总结【转换,替换,计算,截取,加密】
2016/12/07 PHP
php实现简单的权限管理的示例代码
2017/08/25 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
2019/07/01 PHP
PHP实现本地图片转base64格式并上传
2020/05/29 PHP
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
js对象关系图 方便dom操作
2012/03/18 Javascript
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
JS复制到剪贴板示例代码
2013/10/30 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
Javascript中拼接大量字符串的方法
2015/02/05 Javascript
JavaScript访问字符串中单个字符的两种方法
2015/07/03 Javascript
jQuery插件实现可输入和自动匹配的下拉框
2016/10/24 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
Javascript刷新页面的实例
2017/09/23 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
2019/01/27 Javascript
vue实现节点增删改功能
2019/09/26 Javascript
toString.call()通用的判断数据类型方法示例
2020/08/28 Javascript
Python读取Word(.docx)正文信息的方法
2018/03/15 Python
对pyqt5之menu和action的使用详解
2019/06/20 Python
python手机号前7位归属地爬虫代码实例
2020/03/31 Python
python语言中有算法吗
2020/06/16 Python
HTML5 placeholder(空白提示)属性介绍
2013/08/07 HTML / CSS
TripAdvisor土耳其网站:全球知名旅行社区,真实旅客评论
2017/04/17 全球购物
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
美国棒球装备和用品商店:Baseball Savings
2018/06/09 全球购物
信息工程学院毕业生推荐信
2013/11/05 职场文书
如何写好升职自荐信
2014/01/06 职场文书
迟到检讨书400字
2014/01/13 职场文书
2014年督导工作总结
2014/11/19 职场文书
mysql死锁和分库分表问题详解
2021/04/16 MySQL
JavaScript数组 几个常用方法总结
2021/11/11 Javascript
欧元符号 €
2022/02/17 杂记
Rust中的Struct使用示例详解
2022/08/14 Javascript