js实现在文本框光标处添加字符的方法介绍

代码如下:

<script language="javascript" type="text/javascript">
function Button4_onclick(obj) {
obj.focus();
var rng=document.selection.createRange();
rng.setEndPoint("StartToStart",obj.createTextRange());
var eng=document.selection.createRange();
eng.setEndPoint("EndToEnd",obj.createTextRange());
var kone = document.getElementByIdx("Text1");
kone.value=rng.text + "插入字符" + eng.text;
}
</script>
<input id="Text1" type="text" value="1235467890"/>
<input id="Button4" type="button"
value="button" onclick="return Button4_onclick(Text1)" />

代码如下:

<%@ Page Language="C#" AutoEventWireup="true" AspCompat="true" CodeBehind="WebForm1.aspx.cs"
Inherits="SJLERP.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript">
function setCaret(textObj) {
if (textObj.createTextRange) {
textObj.caretPos = document.selection.createRange().duplicate();
}
}
function insertAtCaret(textObj, textFeildValue) {
if (document.all) {
if (textObj.createTextRange && textObj.caretPos) {
var caretPos = textObj.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? textFeildValue + ' ' : textFeildValue;
} else {
textObj.value = textFeildValue;
}
} else {
if (textObj.setSelectionRange) {
var rangeStart = textObj.selectionStart;
var rangeEnd = textObj.selectionEnd;
var tempStr1 = textObj.value.substring(0, rangeStart);
var tempStr2 = textObj.value.substring(rangeEnd);
textObj.value = tempStr1 + textFeildValue + tempStr2;
} else {
alert("This version of Mozilla based browser does not support setSelectionRange");
}
}
}
</script>
<form id="form1" action="" onsubmit="" method="post" enctype="text/plain">
<p>
<textarea name="tarea" rows="" cols="" style="width:300px;height:120px;"
onselect="setCaret(this);"
onclick="setCaret(this);"
onkeyup="setCaret(this);" >例子例子例 Forget Never 子例子例子 asp.net </textarea>
<br/><br/>
<input type="text" name="textfield" style="width:220px;" value="插入FireFox"/>
<br/>
<input type="button" value="插入"
onclick="insertAtCaret(this.form.tarea,this.form.textfield.value);"/>
</p>
</form>
</html>

赞 (0)

相关推荐

  • js光标定位文本框回车表单提交问题的解决方法

    本文实例讲述了js光标定位文本框回车表单提交问题的解决方法.分享给大家供大家参考.具体分析如下: 当光标定位在辅助查找的文本框后回车,页面会出现方法的返回的json串. 原因:When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form. 翻译一下:当form中只有一个in

  • javascript获得光标所在的文本框(text/textarea)中的位置

    js获得光标所在的文本框(text/textarea)中的位置 function getPosition(obj){ var result = 0; if(obj.selectionStart){ //IE以外 result = obj.selectionStart }else{ //IE var rng; if(obj.tagName == "textarea"){ //TEXTAREA rng = event.srcElement.createTextRange(); rng.mo

  • JavaScript自定义文本框光标

    文本框(input或textarea)的光标无法修改样式(除了通过color修改光标颜色).但笔者希望个人创建自己的网站时,文本框的光标有属于自己的风格.所以,尝试模拟文本框的光标,设计有自己风格的光标.以下是笔者个人的想法. [************************基本思路***************************] 对于键盘操作来说,光标的基本操作不外乎最基本的三个键:左箭头(left arrow).右箭头(right arrow)和退格键(backspace). 左箭

  • js获取光标位置和设置文本框光标位置示例代码

    复制代码 代码如下: <script type="text/javascript">        function getTxt1CursorPosition(){            var oTxt1 = document.getElementById("txt1");            var cursurPosition=-1;            if(oTxt1.selectionStart){//非IE浏览器           

  • javascript设置文本框光标的方法实例小结

    本文实例总结了javascript设置文本框光标的方法.分享给大家供大家参考,具体如下: 对于text //得到光标位置 function getCaret(textbox) { var control = document.activeElement; textbox.focus(); var rang = document.selection.createRange(); rang.setEndPoint("StartToStart",textbox.createTextRange

  • js实现在文本框光标处添加字符的方法介绍

    复制代码 代码如下: <script language="javascript" type="text/javascript"> function Button4_onclick(obj) { obj.focus(); var rng=document.selection.createRange(); rng.setEndPoint("StartToStart",obj.createTextRange()); var eng=docu

  • js点击文本框弹出可选择的checkbox复选框

    本文分享一段代码实例,它能够点击文本框的时候,能够弹出下拉的checkbox复选框,选中复选框就能够将值写入文本框中,可能在实际应用中的效果没有这么直白简单,不过可以作为一个例子演示,以便于学习者理解和扩展. 代码如下: <html> <head> <meta charset="gb2312"> <title>js点击文本框弹出可选择的checkbox复选框</title> <style type="text/

  • 详解Vue.js 可拖放文本框组件的使用

    详解Vue.js 可拖放文本框组件的使用

    可拖放文本框允许用户通过拖动备选项至文本框来确定输入,其实也可以说是 combobox 的一种变形. 与 combobox 相比,这种组件能让用户更加直观的看到所有备选项,并且可以是多个输入共用一组备选项. 类似的组件也曾用在 3D Windrose App,Graph Maker App 等多个 app 里. 注册组件 注册可拖放文本框组件(其实就是将封装好的这部分代码 Ctrl+C and Ctrl+V). <script type="text/x-template" id=

  • js判断文本框剩余可输入字数的方法

    本文实例讲述了js判断文本框剩余可输入字数的方法.分享给大家供大家参考.具体如下: 目的:为了更直观的体现用户在文本框输入文本时能看到自己输入了多少字,项目中需要通过判断提示文本框剩余可输入字数 JS实现方法 复制代码 代码如下: <html>  <head runat="server">      <title></title>      <script type="text/javascript"> 

  • JS模仿编辑器实时改变文本框宽度和高度大小的方法

    JS模仿编辑器实时改变文本框宽度和高度大小的方法

    本文实例讲述了JS模仿编辑器实时改变文本框宽度和高度大小的方法.分享给大家供大家参考.具体如下: 这里演示JS模仿编辑器中实时改变文本框大小,包括宽度和高度的方法,在一些在线编辑器,比如eWebEditor中,就有一个功能,让文本框不断的增大或减小,以适应页面的大小,这个功能是如何实现的呢?请您参考一下这个程序,相信你会从中获益. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-editor-cha-width-height-codes/

  • JS实现下拉框的动态添加(附效果)

    JS实现下拉框的动态添加(附效果)

    效果展示: 页面初加载时:      选择车类型后:      选择车颜色后:     JS实现下拉框的动态添加,网页代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www

  • JS实现控制文本框的内容

    JS 控制文本框只能输入数字 <input onkeyup="value=value.replace(/[^0-9]/g,'')" onpaste="value=value.replace(/[^0-9]/g,'')" oncontextmenu = "value=value.replace(/[^0-9]/g,'')"> JS 控制文本框只能输入数字.小数点 <input onkeyup="value=value.r

  • JS实现点击复选框将按钮或文本框变为灰色不可用的方法

    JS实现点击复选框将按钮或文本框变为灰色不可用的方法

    本文实例讲述了JS实现点击复选框将按钮或文本框变为灰色不可用的方法.分享给大家供大家参考.具体如下: 在注册时候经常会看不到,如果不点击阅读注册许可的话,提交按钮是灰色的,失效不能提交,必须点它一下,这个JS代码就是实现这样一个功能,只有你点击了确认提交,下边的按钮才生效. 运行效果如下图所示: 具体代码如下: <html> <head> <title>点击复选框按钮变为不可用</title> </head> <script> var

随机推荐