jsp-计算器-向光标位置插入值
cookqq ›博客列表 ›jquery

jsp-计算器-向光标位置插入值

2012-04-09 15:09:44.0|分类: jquery|浏览量: 1844

摘要: 这是简单的界面。当单击下面的button时,向上面的文本框中输入值。 简单版本:...

这是简单的界面。当单击下面的button时,向上面的文本框中输入值。

简单版本:

<tr><td>公式简写</td></tr>	
<tr>
   <td><textarea id="formula" name="formula" onclick="javascript:addComma(this)"></textarea></td>
</tr>

<div id="jisuanqi">计算器界面
    	<table>
    		<tr>
    			<td><input type = "button" name="jisuanqi_1" id = "jisuanqi_1" value=" 1 "/></td>
    			<td><input type = "button" name="jisuanqi_2" id = "jisuanqi_1" value=" 2 "/></td>
    			<td><input type = "button" name="jisuanqi_3" id = "jisuanqi_1" value=" 3 "/></td>
    			<td><input type = "button" name="jisuanqi_4" id = "jisuanqi_1" value=" 4 "/></td>
    			<td><input type = "button" name="jisuanqi_5" id = "jisuanqi_1" value=" 5 "/></td>
    		</tr>
    		<tr>
    			<td><input type = "button" name="jisuanqi_1" id = "jisuanqi_1" value=" 6 "/></td>
    			<td><input type = "button" name="jisuanqi_1" id = "jisuanqi_1" value=" 7 "/></td>
    			<td><input type = "button" name="jisuanqi_1" id = "jisuanqi_1" value=" 8 "/></td>
    			<td><input type = "button" name="jisuanqi_1" id = "jisuanqi_1" value=" 9 "/></td>
    			<td><input type = "button" name="jisuanqi_1" id = "jisuanqi_1" value=" 0 "/></td>
    		</tr>
    		<tr>
    			<td><input type = "button" name="jisuanqi_1" id = "jisuanqi_1" value=" ( "/></td>
    			<td><input type = "button" name="jisuanqi_1" id = "jisuanqi_1" value=" ) "/></td>
    			<td><input type = "button" name="jisuanqi_1" id = "jisuanqi_1" value=" % "/></td>
    			<td><input type = "button" name="jisuanqi_1" id = "jisuanqi_1" value=" ^ "/></td>
    			<td><input type = "button" name="jisuanqi_1" id = "jisuanqi_1" value=" & "/></td>
    		</tr>
    		<tr>
    			<td><input type = "button" name="jisuanqi_1" id = "jisuanqi_1" value=" + "/></td>
    			<td><input type = "button" name="jisuanqi_1" id = "jisuanqi_1" value=" - "/></td>
    			<td><input type = "button" name="jisuanqi_1" id = "jisuanqi_1" value=" * "/></td>
    			<td><input type = "button" name="jisuanqi_1" id = "jisuanqi_1" value=" / "/></td>
    			<td><input type = "button" name="jisuanqi_1" id = "jisuanqi_1" value=" = "/></td>
    		</tr>
    	</table>
    </div>

jquery代码:

 $(document).ready(function() {
	  $('input[name^="jisuanqi_"]').each(function(){
		  	$(this).click(function () {
		  		var cellValue = $(this).val().trim();
		  		///将单击后的数值传到公式简写里面
		  		var old = $("#formula").val();
		  		if(old!=null && old != ""){
		  			$("#formula").val(old+cellValue);
		  		}else{
		  			$("#formula").val(cellValue);
		  		}
		  		
		  	});
	  	});
	});

这就实现了上面的基本功能,当单击按钮时,就会把数值累加到文本框的后面。但是如果想把值添加到前面的某个位置就会出现问题。怎么解决这个问题呢?看下面的代码:

  function getCursortPosition (ctrl) {//获取光标位置函数
		var CaretPos = 0;	// IE Support
		if (document.selection) {
		ctrl.focus ();
			var Sel = document.selection.createRange ();
			Sel.moveStart ('character', -ctrl.value.length);
			CaretPos = Sel.text.length;
		}
		// Firefox support
		else if (ctrl.selectionStart || ctrl.selectionStart == '0')
			CaretPos = ctrl.selectionStart;
		return (CaretPos);
	}
  function addComma(obj){
		pos = getCursortPosition(obj);
	}
  $(document).ready(function() {
	  $('input[name^="jisuanqi_"]').each(function(){
		  	$(this).click(function () {
		  		var cellValue = $(this).val().trim();
		  		alert(pos);
		  		///将单击后的数值传到公式简写里面
		  		var old = $("#formula").val();
		  		if(old!=null && old != ""){
		  			$("#formula").val(old.substring(0, pos)+cellValue+old.substring(pos));
		  			pos= pos+1;
		  		}else{
		  			$("#formula").val(cellValue);
		  			pos= pos+1;
		  		}
		  		
		  	});
	  	});
	});

这样就完成了,想光标位置插入数值。

过程:单击文本框时记录光标的位置-》单击按钮时向光标的位置插入数值-》光标位置增1

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

有个问题:当出现滚动条的情况下,滚动条不会滚动到光标所在的行 有解决方法不? :)

引用来自“suan2046”的评论

有个问题:当出现滚动条的情况下,滚动条不会滚动到光标所在的行

是吗?我还真没试过,我看看吧。

一键分享文章

分类列表

  • • struts源码分析
  • • flink
  • • struts
  • • redis
  • • kafka
  • • ubuntu
  • • zookeeper
  • • hadoop
  • • activiti
  • • linux
  • • 成长
  • • NIO
  • • 关键词提取
  • • mysql
  • • android studio
  • • zabbix
  • • 云计算
  • • mahout
  • • jmeter
  • • hive
  • • ActiveMQ
  • • lucene
  • • MongoDB
  • • netty
  • • flume
  • • 我遇到的问题
  • • GRUB
  • • nginx
  • • 大家好的文章
  • • android
  • • tomcat
  • • Python
  • • luke
  • • android源码编译
  • • 安全
  • • MPAndroidChart
  • • swing
  • • POI
  • • powerdesigner
  • • jquery
  • • html
  • • java
  • • eclipse
  • • shell
  • • jvm
  • • highcharts
  • • 设计模式
  • • 列式数据库
  • • spring cloud
  • • docker+node.js+zookeeper构建微服务
版权所有 cookqq 感谢访问 支持开源 京ICP备15030920号
CopyRight 2015-2018 cookqq.com All Right Reserved.