编程 Javascript

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中添加值的实例代码

Jquery实现点击按钮,连续地向textarea中添加值的实例代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Prototype RegExp对象学习

Jul 19 Javascript

jQuery初学:find()方法及children方法的区别分析

Jan 31 Javascript

Javascript 遮罩层和加载效果代码

Aug 01 Javascript

轻量级的原生js日历插件calendar.js使用指南

Apr 28 Javascript

JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)

Jun 21 Javascript

javascript中setAttribute兼容性用法分析

Dec 12 Javascript

Node层模拟实现multipart表单的文件上传示例

Jan 02 Javascript

webpack手动配置React开发环境的步骤

Jul 02 Javascript

jsonp格式前端发送和后台接受写法的代码详解

Nov 07 Javascript

vue.js iview打包上线后字体图标不显示解决办法

Jan 20 Javascript

JavaScript Tab菜单实现过程解析

May 13 Javascript

vue实现简单的登录弹出框

Oct 26 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