2012-04-09 15:09:44.0|分类: jquery|浏览量: 1693
这是简单的界面。当单击下面的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”的评论有个问题:当出现滚动条的情况下,滚动条不会滚动到光标所在的行 |