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

这是简单的界面。当单击下面的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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

转载于:https://my.oschina.net/winHerson/blog/52843