`
jickcai
  • 浏览: 247468 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Textarea ---操作

阅读更多

App = {};

 

App.byteLength = function(str) {

    if (typeof str == "undefined") {

        return 0

    }

    var aMatch = str.match(/[^\x00-\x80]/g);

    return (str.length + (!aMatch ? 0: aMatch.length))

};

App.trim = function(str) {

str= str.replace(/^(\u3000|\s|\t)*/gi, "");

str= str.replace(/(\u3000|\s|\t)*$/gi, "");

    return str;

};

 

App.selectionStart='';

App.currentKey='';

 

App.TextareaUtils = (function() {

    var it = {},

    ds = document.selection;

    it.selectionStart = function(oElement) {

        if (!ds) {

            return oElement.selectionStart

        }

        var er = ds.createRange(),

        value,

        len,

        s = 0;

        var er1 = document.body.createTextRange();

        er1.moveToElementText(oElement);

        for (s; er1.compareEndPoints("StartToStart", er) < 0; s++) {

            er1.moveStart("character", 1)

        }

        return s

    };

    it.selectionBefore = function(oElement) {

        return oElement.value.slice(0, it.selectionStart(oElement))

    };

    it.selectText = function(oElement, nStart, nEnd) {

        oElement.focus();

        if (!ds) {

            oElement.setSelectionRange(nStart, nEnd);

            return

        }

        var c = oElement.createTextRange();

        c.collapse(1);

        c.moveStart("character", nStart);

        c.moveEnd("character", nEnd - nStart);

        c.select()

    };

    it.insertText = function(oElement, sInsertText) {

nStart = App.selectionStart;

nLen = App.currentKey.length;

        oElement.focus();

        nLen = nLen || 0;

        if (!ds) {

            var text = oElement.value,

            start = nStart - nLen,

            end = start + sInsertText.length;

            oElement.value = text.slice(0, start) + sInsertText + text.slice(nStart, text.length);

            it.selectText(oElement, end, end);

            return

        }

        var c = ds.createRange();

        c.moveStart("character", -nLen);

        c.text = sInsertText

    };

    it.getCursorPos = function(obj) {

        var CaretPos = 0;

        if ($IE) {

            obj.focus();

            var range = null;

            range = ds.createRange();

            var stored_range = range.duplicate();

            stored_range.moveToElementText(obj);

            stored_range.setEndPoint("EndToEnd", range);

            obj.selectionStart = stored_range.text.length - range.text.length;

            obj.selectionEnd = obj.selectionStart + range.text.length;

            CaretPos = obj.selectionStart

        } else {

            if (obj.selectionStart || obj.selectionStart == "0") {

                CaretPos = obj.selectionStart

            }

        }

        return CaretPos

    };

    it.getSelectedText = function(obj) {

        var selectedText = "";

        var getSelection = function(e) {

            if (e.selectionStart != undefined && e.selectionEnd != undefined) {

                return e.value.substring(e.selectionStart, e.selectionEnd)

            } else {

                return ""

            }

        };

        if (window.getSelection) {

            selectedText = getSelection(obj)

        } else {

            selectedText = ds.createRange().text

        }

        return selectedText

    };

    it.setCursor = function(obj, pos, coverlen) {

        pos = pos == null ? obj.value.length: pos;

        coverlen = coverlen == null ? 0: coverlen;

        obj.focus();

        if (obj.createTextRange) {

            var range = obj.createTextRange();

            range.move("character", pos);

            range.moveEnd("character", coverlen);

            range.select()

        } else {

            obj.setSelectionRange(pos, pos + coverlen)

        }

    };

    it.unCoverInsertText = function(obj, str, pars) {

        pars = (pars == null) ? {}: pars;

        pars.rcs = pars.rcs == null ? obj.value.length: pars.rcs * 1;

        pars.rccl = pars.rccl == null ? 0: pars.rccl * 1;

        var text = obj.value,

        fstr = text.slice(0, pars.rcs),

        lstr = text.slice(pars.rcs + pars.rccl, text == "" ? 0: text.length);

        obj.value = fstr + str + lstr;

        this.setCursor(obj, pars.rcs + (str == null ? 0: str.length))

    };

    return it

})();

 

App.check = function(current) {

            var tu=App.TextareaUtils,reg = /@[^@\s]{1,20}$/g,

            value = current.value.replace(/\r/g, ""),

            key;

            selectionStart = tu.selectionStart(current);

App.selectionStart = selectionStart;

            value = value.slice(0, selectionStart);

            if ((key = value.match(reg)) && (key = key[0]) && /^@[a-zA-Z0-9\u4e00-\u9fa5_]+$/.test(key)) {

                key = key.slice(1);

                if (App.currentKey == key) {

                    return '';

                }

            }else{

key = '';

}

 

App.currentKey = key;

return key;

};

 

App.forwardInputLimit = function(current , input) {

       var num = Math.ceil(App.byteLength(App.trim(current.value)) / 2);

        if (input) {

            if (num > 140) {

input.innerHTML = '已经超出<em>'+(num-140)+'</em>字';               

                return false

            } else {

                input.innerHTML = '还可以输入<em>'+(140-num)+'</em>字';

                return true

            }

        }

};


分享到:
评论

相关推荐

    前端项目-react-textarea-autosize.zip

    它通过监听输入事件并计算实际内容的高度,而不是频繁地重新渲染整个组件,这样可以减少不必要的DOM操作,提高应用性能。 总的来说,`react-textarea-autosize`是一个强大的工具,可以帮助开发者在React项目中创建...

    react-textarea-autosize-widget:使用React的Textarea自动调整大小小部件

    `react-textarea-autosize-widget`正是这样一个组件,它是一个用于React的轻量级、高性能的文本区域自动调整大小的小部件。这个库基于`textarea-autosize`,专门为React应用程序提供了便捷的解决方案。 **核心功能*...

    New Tab to TextArea-crx插件

    在New Tab to TextArea-crx中,这个TextArea提供了基本的文字编辑功能,比如文本选择、复制、粘贴、剪切以及撤销和重做等操作,让用户在浏览器内就能处理文本,无需打开额外的应用程序。 此外,由于新标签页通常是...

    textarea-extend:HTML 文本区域的个人扩展

    7. **复制/粘贴处理**:优化了复制和粘贴操作,确保在粘贴时能保留原有的格式,而不是简单地作为纯文本插入。 8. **多语言支持**:对于国际化的网站,项目可能提供了多语言界面,根据用户的浏览器设置或选择切换...

    textarea自适应高度标签,去除难看的滚动条

    jQuery 是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。对于`textarea`的高度自适应,我们可以监听用户的输入事件,当用户输入内容导致`textarea`溢出时,动态调整其高度以适应...

    TextareaAutosize根据内容的大小自动调整Textarea

    1. 首先,在HTML中创建一个`Textarea`元素,确保设置好它的`id`以便后续JavaScript可以找到并操作它。 ```html &lt;textarea id="autosize-textarea"&gt;&lt;/textarea&gt; ``` 2. 引入`autosize`库。如果项目使用的是`npm`管理...

    使用HTML开发商业网站-表单控件-textarea课件.pptx

    为了提高用户体验,可以使用JavaScript对`textarea`进行更复杂的操作,如限制输入字符数、实时字数统计、自动换行等。此外,还可以利用HTML5的`placeholder`属性提供提示信息: ```html &lt;textarea cols="60" rows=...

    jQuery Textarea全屏插件Textarea Fullscreen

    jQuery Textarea Fullscreen插件通过绑定事件监听器来触发全屏模式,当用户点击特定的按钮或执行特定操作时,textarea元素会扩展至浏览器窗口的边界。同时,插件还提供了退出全屏模式的功能,确保用户可以根据需要...

    固定textarea文本域尺寸

    总的来说,禁用 `textarea` 的拖动调整大小是一项常见的前端优化操作,通过CSS的 `resize` 属性可以轻松实现。但这同时也需要考虑到用户体验的平衡,确保用户仍能方便地阅读和编辑文本。在设计时,结合其他交互元素...

    textarea 输入框自适应高度

    总的来说,"textarea 输入框自适应高度"是一个提升用户体验的重要技巧,涉及到前端开发中的DOM操作、事件监听和动态样式修改。通过实践和理解这样的技术,开发者可以构建出更智能、更易用的web应用。

    textarea长度控制

    ##### 3.2 处理粘贴操作 当用户通过复制粘贴的方式输入大量文本时,可能一次性超过了最大长度,此时仅依靠`keyup`事件无法及时截断。因此,还需要处理`paste`事件。实现如下: ```javascript $.each($('textarea...

    在textarea光标处插入文本

    - 按钮用于触发文本插入操作。 #### 四、注意事项 1. **兼容性问题**:不同浏览器间的实现细节存在差异,需要进行充分的测试确保在各个环境下都能正常工作。 2. **用户体验**:插入文本时应考虑用户体验,比如是否...

    textarea限制长度插件

    在本插件中,jQuery被用来处理DOM操作和事件监听,以便在用户输入时实时检测并限制textarea的字符数量。 该插件的核心功能包括: 1. **实时监测**:当用户在textarea中输入文字时,插件会实时计算已输入的字符数,...

    Textarea在光标停留处插入文字

    在网页开发中,`Textarea` 是一种常用的表单元素,用于收集用户输入的多行文本。标题“Textarea在光标停留处插入文字”涉及到的是如何在`Textarea`中实现文字的动态插入,使得新添加的文字能精确地出现在用户当前...

    layui 富文本编辑器和textarea值的相互传递方法

    &lt;textarea name="content" id="demo" placeholder="请输入资讯内容" class="layui-textarea" lay-verify="content"&gt;&lt;/textarea&gt; ``` 2. 使用Layui提供的API构建富文本编辑器,并在其中配置编辑器的工具栏,选择...

    textarea.7z

    `jQuery`提供了强大的选择器、事件处理和DOM操作功能,使得开发者能更高效地操作DOM元素,从而实现复杂的功能,比如实时监测`textarea`的输入字数。 首先,我们需要引入`jQuery`库。这可以通过在HTML文件的`&lt;head&gt;`...

    关于Textarea的换行问题

    如果`menuitem19`被选中,即用户可能通过某种界面操作选择了特定的换行模式或界面布局,那么程序将使用`text1`作为当前的TextArea,并更新其文本内容。接着,移除之前存在的TextArea(在本例中为`text2`),并将`...

    放大缩小textarea 带缓冲动画效果

    1. **性能优化**:使用更高效的DOM操作方法,如使用`requestAnimationFrame`代替`setTimeout`,以提高动画性能。 2. **用户体验改进**:可以考虑加入过渡效果(CSS transitions或animations),使变化更加柔和。 3. ...

    textarea换行符

    ### textarea换行符处理 在Web开发中,`textarea`元素是HTML中用于接收多行文本输入的一个常用组件。在用户通过`textarea`输入文本时,可能会遇到换行符(通常为`\r\n`)的问题。这些换行符在不同的环境中可能会被...

    flex解决textarea,input不能输入中文的方法

    ### flex解决textarea,input不能输入中文的方法 在使用Flex进行Web应用开发时,有时会遇到一个让人头疼的问题:在非主应用程序环境下(例如嵌入到HTML页面中的SWF文件),textarea和input控件无法正常输入中文字符...

Global site tag (gtag.js) - Google Analytics