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

代码如下：


代码如下:

<%@ 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=" &lt "/>
  <input id="buttonValidate8" type="button" value=" &gt "/>     
  <input id="buttonValidate9" type="button" value=" &amp "/>
  <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中；

如图：

赞 (0)

相关推荐

  • jquery清空textarea等输入框实现代码

    完整示例:http://www.keleyi.com/keleyi/phtml/clearinput.htm 下面是源代码: 复制代码 代码如下: <script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script> <textarea id="keleyi_com" cols=&q

  • JQuery为textarea添加maxlength属性的代码

    通过JQuery的keyup事件: 复制代码 代码如下: <html> <head> <title>JQuery为textarea添加maxlength</title> <script type="text/javascript" src="jquery-1.4.js"></script> </head> <body> <textarea style="w

  • jquery实现限制textarea输入字数的方法

    jquery怎么实现限制textarea输入的字数呢?有需要的朋友可以参考一下我写的例子,当然如果有误,也希望大家能及时指出来,大家共同学习进步. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>textarea 限制字数</title> <style> .container{ positio

  • TextArea不支持maxlength的解决办法(jquery)

    用.net 控件久了,在给一个页面的TextBox 增加控制长度的控制时,简单的加了一个maxlength='xxx' 就行,可是测试确总是不过,原因是设置了多行模式,在这样的情况下生成的html代码就是textarea,同时maxlength属性就没有被增加上,因为IE不支持textarea 的 maxlength属性,于是,在firefox 6中测试,发现firefox是支持这个属性的.那么就简单了.自己写了一个jquery的扩展,这样就可以很容易实现对textarea控制最大长度了. 扩展

  • jQuery替换textarea中换行的方法

    本文实例讲述了jQuery替换textarea中换行的方法.分享给大家供大家参考.具体分析如下: 昨天同事在学习jQuery的时候,希望使用替换掉textarea中的换行. html部分: <fieldset> <textarea id="ncontent"></textarea> </fieldset> <button id="submit">提 交</button> js部分: $(docu

  • jquery实现textarea输入框限制字数的方法

    本文实例讲述了jquery实现textarea输入框限制字数的方法.分享给大家供大家参考.具体分析如下: 网上有使用属性 disabled 来实现,这个不好,想修改都没有修改.当然,这个也不是很完美. 复制代码 代码如下: <html> <head> <title> jquery完美实现textarea输入框限制字数</title> <meta http-equiv="content-type" content="text

  • 使用jquery给input和textarea设定ie中的focus

    使用jquery给input和textarea设定ie中的focus

    今天在做我们的表单提交部分的时候,遇到了这个问题,于是,用传说中的jquery就可以解决了. 这里主要说的是在IE下的focus的问题,因为在firefox中是支持 复制代码 代码如下: input:focus  textarea:focus 在IE下:focus是无效的,所以,我们要在点击以后给input和textarea加上新的样式以配合实现:focus效果. 我们首先来看下效果: 来看下这个效果中的JS: <script language="javascript">

  • 基于jquery的textarea发布框限制文字字数输入(添加中文识别)

    基于jquery的textarea发布框限制文字字数输入(添加中文识别)

    效果图如下 : 源代码如下 : 复制代码 代码如下: <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> <script type="text/javascript"> $(function() { $("textarea"

  • jQuery textarea的长度进行验证

    扩展textarea 属性,结合jquery.validate.js,在提交表单同时,加上对textarea的长度进行验证. 1.jQuery 对textarea 长度进行验证的插件 复制代码 代码如下: //对textarea 长度进行验证 jQuery.fn.checkLength = function(parameters) { defaults = { min: 0 , max: 5 } jQuery.extend(defaults, parameters); // 当前textarea

  • textarea中的手动换行处理的jquery代码

    textarea中的手动换行处理的jquery代码

    网上众说纷纭,经过测试用 textarea的内容.replace(/\n/g, "<br/>") 解决问题,在IE6/7/8/9 Firefox/3.6.13 chrome10.0.648.82下测试通过,示例代码如下: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

随机推荐