`
cwy534363081
  • 浏览: 7412 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

js实现输入框焦点中插入文字

 
阅读更多

var focus_tag = { first:function(area){ 
          area.focus(); 
          if (area == null) { 
              area = event.srcElement; 
          } 
          if(document.selection){ 
              var rtextRange = area.createTextRange(); 
              rtextRange.moveStart('character', area.value.length); 
              rtextRange.collapse(true); 
              rtextRange.select(); 
          } 
    },getCursorPosition:function(textarea) { 
            var rangeData = {text: "", start: 0, end: 0 }; 
            textarea.focus(); 
        if (textarea.setSelectionRange) { // W3C 
            rangeData.start= textarea.selectionStart; 
            rangeData.end = textarea.selectionEnd; 
            rangeData.text = (rangeData.start != rangeData.end) ? textarea.value.substring(rangeData.start, rangeData.end): ""; 
        } else if (document.selection) { // IE 
            var i, 
                oS = document.selection.createRange(), 
                oR = document.body.createTextRange(); 
            oR.moveToElementText(textarea); 
         
            rangeData.text = oS.text; 
            rangeData.bookmark = oS.getBookmark(); 
            for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 && oS.moveStart("character", -1) !== 0; i ++) { 
                if (textarea.value.charAt(i) == '\n') { 
                    i ++; 
                } 
            } 
            rangeData.start = i; 
            rangeData.end = rangeData.text.length + rangeData.start; 
        } 
         
        return rangeData; 
    }, setCursorPosition:function(textarea, rangeData) { 
        if(!rangeData) { 
            alert("You must get cursor position first."); 
        } 
        if (textarea.setSelectionRange ) { // W3C 
            textarea.focus(); 
            textarea.setSelectionRange(rangeData.start, rangeData.end); 
        } else if (textarea.createTextRange) { // IE 
            var oR = textarea.createTextRange(); 
            if(textarea.value.length === rangeData.start) { 
                oR.collapse(false); 
                oR.select(); 
            } else { 
                oR.moveToBookmark(rangeData.bookmark); 
                oR.select(); 
            } 
        } 
    },add:function (textarea, rangeData,text) { 
        var oValue, nValue, oR, sR, nStart, nEnd, st; 
        this.setCursorPosition(textarea, rangeData); 
        if (textarea.setSelectionRange) { // W3C 
            oValue = textarea.value; 
            nValue = oValue.substring(0, rangeData.start) + text + oValue.substring(rangeData.end); 
            nStart = nEnd = rangeData.start + text.length; 
            st = textarea.scrollTop; 
            textarea.value = nValue; 
            if(textarea.scrollTop != st) { 
                textarea.scrollTop = st; 
            } 
            textarea.setSelectionRange(nStart, nEnd); 
        } else if (textarea.createTextRange) { // IE 
            sR = document.selection.createRange(); 
            sR.text = text; 
            sR.setEndPoint('StartToEnd', sR); 
            sR.select(); 
        } 
    } 
}
 
分享到:
评论

相关推荐

    【JavaScript源代码】element input输入框自动获取焦点的实现.docx

    在JavaScript和Vue.js开发中,有时我们需要实现一种功能,即当页面加载或特定事件发生时,使输入框(input)自动获取焦点。这样的需求在创建表单或评论系统时尤其常见,用户可以直接开始输入而无需手动点击输入框。...

    javascript 金额输入框

    在这个例子中,当输入框失去焦点时(`onblur`事件),会触发校验。如果输入的金额无效,输入框将被清空。 此外,为了优化用户体验,我们还可以通过CSS来美化这个输入框,例如添加边框、背景色等样式: ```css #...

    jQuery实现输入框提示绑定车牌号码特效源码.rar_bread16q_bushgz9_html车牌输入框_plentybt1

    本项目是关于使用jQuery实现一个输入框提示功能,特别针对车牌号码输入进行优化,提供了键盘模拟(js键盘或软键盘)以及特定格式的输入提示。 首先,我们来探讨jQuery如何实现输入框的提示功能。在HTML中,我们可以...

    Vue 实现输入框新增搜索历史记录功能

    在本文中,我们将深入探讨如何在Vue框架中实现一个搜索输入框功能,此功能将能够记录用户的搜索历史,并能够将这些历史记录显示给用户,同时提供清除历史记录的选项。为达成此功能,我们将采用一个名为good-storage...

    jQuery插件EnPlaceholder实现输入框提示文字

    jQuery插件EnPlaceholder是一款用来为网页中的输入框添加提示文字功能的JavaScript插件。它允许开发者在HTML5的placeholder属性尚未被支持的浏览器中模拟这一功能,并且还扩展了此功能,可以应用于密码输入框。该...

    jq获取焦点插入内容

    此外,HTML5引入了一些新的属性,如`placeholder`,可以用来在输入框中显示提示性文字,直到用户开始输入。然而,对于不支持`placeholder`属性的老版本浏览器,上述的jQuery方法仍然是一个很好的解决方案。 总之,...

    html+js+css车牌号输入法

    在这个案例中,JavaScript代码会监听输入框的焦点和输入事件,当用户点击输入框时,可以显示自定义的车牌号键盘。键盘的每个按钮都有对应的点击事件,点击后会在输入框中插入相应的字符。JavaScript还可以实现输入...

    jquery表单文本框添加文字标签

    在jQuery中,我们可以通过选择器找到特定的文本框元素,然后使用`.before()`或`.after()`方法来在其前后插入HTML内容,从而实现文字标签的添加。例如,如果我们的文本框ID是"myInput",我们可以这样操作: ```...

    仿百度输入框显示搜索内容

    在IT行业中,创建一个仿百度输入框显示搜索内容的功能是一项常见的前端开发任务,它涉及到用户界面(UI)设计和交互的优化,以提供良好的用户体验。这个功能的核心是文本框(TextBox),一个允许用户输入文本的HTML...

    JQuery插件 IP地址输入框

    4. **事件处理**:可能包含`onFocus`、`onBlur`等事件处理,使得在输入框获取或失去焦点时,插件能进行相应的操作,比如清除默认值或展示验证结果。 5. **自定义样式**:尽管在IE下CSS样式可能存在问题,但插件应该...

    文本框倒叙输入让输入框的焦点始终在最开始的位置

    文本框倒叙输入是一种特殊的输入方式,它使得用户在输入字符时,焦点始终保持在输入框的最开始位置,因此输入的字符会出现在已输入内容的前面,形成倒序的效果。这种功能常见于某些特定的场景,例如在某些密码输入...

    jquery实现在光标位置插入内容的方法

    总的来说,这篇文档主要介绍了如何使用jQuery在文本输入框中实现光标位置插入内容的技巧,这对于提高Web页面的交互性,尤其是在需要丰富文本输入场景下,提供了很有用的解决方案。开发者通过学习这些知识点,可以...

    JS手机号码输入框特效特效代码

    【标题】"JS手机号码输入框特效特效代码" 涉及的核心知识点是JavaScript(JS)在前端开发中的应用,特别是在处理用户输入时创建交互式和动态效果的技术。这种特效通常用于提高用户体验,使得在网页上输入手机号码的...

    可输入选择框(类百度输入框效果)

    类百度输入框效果是网页交互设计中的一个重要组成部分,它通过结合jQuery的便利性和动态数据处理,实现了高效的用户输入辅助。通过不断优化和调整,我们可以创建出更智能、更人性化的输入体验。在实际开发中,可以...

    用javascript实现软键盘

    当用户点击软键盘上的按键时,触发相应的回调函数,将按键的值插入到当前焦点的输入框中。 4. **键盘逻辑**:在JavaScript中,你需要编写处理按键点击的函数。这可能包括获取当前焦点元素,模拟`keydown`和`keyup`...

    js移动焦点到最后位置的简单方法

    在JavaScript编程中,有时我们需要对输入框(input)或文本区域(textarea)进行操作,确保当用户聚焦到这些元素时,光标会自动移动到最后,这样用户可以直接开始输入,而无需手动滚动到文本末尾。这种方法可以提升...

    JS输入用户名自动显示邮箱后缀列表的方法

    标题中的“JS输入用户名自动显示邮箱后缀列表的方法”指的是使用JavaScript实现的一种功能,当用户在输入框中输入用户名时,系统会自动显示一个包含常见邮箱后缀的下拉列表,帮助用户快速选择或完成邮箱地址输入。...

    带图标的input输入框

    在这个例子中,`&lt;i&gt;`标签用于插入图标,这里我们使用了类名为`icon-search`的CSS图标库(如Font Awesome或Ionicons),`&lt;input&gt;`标签则是用户输入的地方,`for`属性与`id`属性相匹配,确保点击图标时会聚焦到输入框...

    上下左右键控制table中光标(兼容多浏览器)

    本文将详细讲解如何使用JavaScript实现输入框内上下左右键以及Enter键控制表格(table)中的光标移动,并在光标到达最后一个输入框时新增一行,确保这个功能在多个浏览器中都能正常工作。 首先,我们需要理解...

Global site tag (gtag.js) - Google Analytics