jsp中，textarea 光标默认左顶端以及默认没有滚动条

Posted 2023-04-06

我在jsp里用textarea，默认会有很多的空格，并且，光标可以点击左端、中间等地方。而我现在想要做到：
1.空白时，不管点击文本域哪里，光标始终在左顶端并去掉默认的空格，输入文字后，光标在最后一个文字后边；
2.当文字过多，超过显示大小时，才出来滚动条！

其实，就跟 回复这个问题时各位点击那个文本域的效果差不多的。

这个要怎么实现，各位大哥大姐棒棒忙吧！

文本域是开合标签,即必须配对:中间的内容部分在标签的中间部分;
eg:<textarea> 这个是内容 </textarea>;
个人估计你中间的空格是两个标签中间存在空格,如上述示例;
控制滚动条一般通过样式处理,个人通常用下述写法:
<textarea cols='50' rows='10' style="overflow:hidden"></textarea>
如果你写为:
<textarea cols='50' rows='10' style="overflow:hidden">
</textarea>
的话,文本域中就会出现换行了追问

哦哦，我就是写成换行的方式了，style="overflow:auto" 滚动条也解决了！

参考技术A 在jsp中，控制textarea的光标和滚动条的方法：
<textarea cols=30 name=RedF9 rows=3 style="BORDER-BOTTOM: #006600 1px
dotted; BORDER-LEFT: #006600 1px dotted; BORDER-RIGHT: #006600 1px
dotted; BORDER-TOP: #006600 1px dotted" wrap=VIRTUAL></textarea>
没有水平滚动条：
<textarea style="overflow-x:hidden"></textarea>

没有垂直滚动条:
<textarea style="overflow-y:hidden"></textarea>

没有滚动条:
<textarea style="overflow-x:hidden;overflow-y:hidden"></textarea>
或<textarea style="overflow:hidden"></textarea> 参考技术B <textarea rows="3" cols="50"></textarea>难道 还要 别的吗追问

这样的话，会存在空格的，而且，光标可以点击到其他位置去。不能保证光标始终在最后一个非空格字符的后边！

追答

哦 你的意思 里面 不能打空格 而且 鼠标 始终在最后 不能点击到其他 地方去是吧

追问

可以加空格，只是，最初的时候，是光标只能在在左顶端，输入文字后，光标在最后一个文字后边，你点击回复时，可以看一下回复框，最初，不管点击框内什么位置，光标始终在左顶端，有文字后，光标可以点击到最后一个文字之前的任何位置，但是不能在最后一个文字以后的任何位置！而且最初还没滚动条的。就这个效果，我就想要这样的。但是，我看，好像用了其他控件的。

追答

额 我真的 不太懂了 你第一次点击的时候 就会在最左顶端 有文字后，光标可以点击到最后一个文字之前的任何位置，，但是不能在最后一个文字以后的任何位置！而且最初还没滚动条的。

难道 你用的 就不行了吗

追问

那你在没有输入任何文字时再在其他位置点击一下，看光标会不会存在于其他地方。而且，你再选中里边，看看能不能选中到很多的空格。

获取textarea文本框所选字符光标位置索引，以及选中的文本值；textarea高度自适应，随着内容增加高度增加；获取输入框中的光标位置

获取textarea文本框所选字符光标位置索引，以及选中的文本值

 　　　　　　　　$.fn.selection = function () {
                    var s, e, range, stored_range;
                    if (this[0].selectionStart == undefined) {
                        var selection = document.selection;
                        if (this[0].tagName.toLowerCase() != "textarea") {
                            var val = this.val();
                            range = selection.createRange().duplicate();
                            range.moveEnd("character", val.length);
                            s = (range.text == "" ? val.length : val.lastIndexOf(range.text));
                            range = selection.createRange().duplicate();
                            range.moveStart("character", -val.length);
                            e = range.text.length;
                        } else {
                            range = selection.createRange(),
                                stored_range = range.duplicate();
                            stored_range.moveToElementText(this[0]);
                            stored_range.setEndPoint(‘EndToEnd‘, range);
                            s = stored_range.text.length - range.text.length;
                            e = s + range.text.length;
                        }
                    } else {
                        s = this[0].selectionStart,
                            e = this[0].selectionEnd;
                    }
                    var te = this[0].value.substring(s, e);
                    return {start: s, end: e, text: te};
                };

textarea高度自适应，随着内容增加高度增加

                $.fn.autoHeight = function(){
                    return this.each(function(){
                        var $this = jQuery(this);
                        if( !$this.attr(‘_initAdjustHeight‘) ){
                            $this.attr(‘_initAdjustHeight‘, $this.outerHeight());
                        }
                        _adjustH(this).on(‘input‘, function(){
                            _adjustH(this);
                        });
                    });
                    /**
                     * 重置高度
                     * @param {Object} elem
                     */
                    function _adjustH(elem){
                        var $obj = jQuery(elem);
                        return $obj.css({height: $obj.attr(‘_initAdjustHeight‘), ‘overflow-y‘: ‘hidden‘})
                            .height( elem.scrollHeight );
                    }

                };

获取输入框中的光标位置

                $.fn.getCursorPosition = function () {
                    var el = $(this).get(0);
                    var pos = 0;
                    if (‘selectionStart‘ in el) {
                        pos = el.selectionStart;
                    } else if (‘selection‘ in document) {
                        el.focus();
                        var Sel = document.selection.createRange();
                        var SelLength = document.selection.createRange().text.length;
                        Sel.moveStart(‘character‘, -el.value.length);
                        pos = Sel.text.length - SelLength;
                    }
                    return pos;
                };