JS简单获取并修改input文本框内容的方法示例
本文实例讲述了JS简单获取并修改input文本框内容的方法。分享给大家供大家参考,具体如下:
一 介绍
获取文本框并修改其内容可以使用getElementById()
方法来实现。
getElementById()
方法可以通过指定的id来获取HTML标记,并将其返回。
语法:
sElement=document.getElementById(id)
sElement:用来接收该方法返回的一个对象。
id:用来设置需要获取HTML标记的id值。
二 应用
获取文本框并修改其内容
在页面加载后的文本框中将会显示“初始文本内容”,当单击按钮后将会改变文本框中的内容。
三 代码
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.jb51.net 获取文本框并修改其内容</title> </head> <body> <script language="javascript"> <!-- function c1() { var t=document.getElementById("txt"); t.value="www.jb51.net 修改文本内容" } --> </script> <input type="text" id="txt" value="初始文本内容" size="30"/> <input type="button" value="更改文本内容" name="btn" onclick="c1();" /> </body> </html>
四 运行结果
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
JS双击变input框批量修改内容
双击空白或者文字变成input框修改内容: html代码 <td class="center" ondblclick="ShowElement(this,'intro')">{$vo.intro}</td> <td class="center" ondblclick="ShowElement(this,'address')">{$vo.address}</td> js代码 //双
-
JS判断文本框内容改变事件的简单实例
oninput,onpropertychange,onchange的用法 onchange触发事件必须满足两个条件: a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效) b)当前对象失去焦点(onblur): onpropertychange的话,只要当前对象属性发生改变,都会触发事件,但是它是IE专属的: oninput是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于对象时,并非该对象所有属性改变都能触发事件,
-
JS获取及设置TextArea或input文本框选择文本位置的方法
本文实例讲述了JS获取及设置TextArea或input文本框选择文本位置的方法.分享给大家供大家参考.具体实现方法如下: function getPos(el) { var range, textRange, duplicate el.focus() if ( el.selectionStart ) return el.selectionStart else if ( document.selection ) { // IE range = document.selection.createR
-
js修改input的type属性及浏览器兼容问题探讨与解决
js修改input的type属性有些限制.当input元素还未插入文档流之前,是可以修改它的值的,在ie和ff下都没问题.但如果input已经存在于页面,其type属性在ie下就成了只读属性了,不可以修改.在ff下仍是可读写属性. 今天遇到个问题,输入框有默认值"密码",但获得焦点时,"密码"两字会去掉,输入时直接变成"****"的password类型.很明显,一开始的时候,input的类型是text,后来变成了password类型.直观的思路是
-
js动态修改input输入框的type属性(实现方法解析)
需要实现的效果:一个输入框,当输入框未获得焦点的时候,value 值为 "密码":当输入框失去焦点的时候,输入内容显示为"*****" <input name="password" type="text" id="showPwd" tabindex="2″ class="input" value="密码" /> 我们很直接会想到下面的js $(&
-
捕获input文本框内容改变事件的js代码
网上一位老兄采用如此方法: readonly :是文本框不可输入. function dochg(){ document.getElementById("testId").value = "test" } setTimeout("dochg()",1000) function showValue(obj){ alert("changed value is " + obj); } [Ctrl+A 全选 注:如需引入外部Js需刷新
-
js修改input的type属性问题探讨
js修改input的type属性有些限制.当input元素还未插入文档流之前,是可以修改它的值的,在ie和ff下都没问题.但如果input已经存在于页面,其type属性在ie下就成了只读属性了,不可以修改.在ff下仍是可读写属性. 今天遇到个问题,输入框有默认值"密码",但获得焦点时,"密码"两字会去掉,输入时直接变成"****"的password类型.很明显,一开始的时候,input的类型是text,后来变成了password类型.直观的思路是
-
通过js修改input、select默认字体颜色
textarea默认字颜色以及获取焦点后的字的颜色,焦点获取后使默认消失 <textarea cols="50" rows="5" id="textarea" onfocus="if(value=='获取到元素焦点'){value='';document.getElementById('textarea').style.color='#000'}" onblur="if (value ==''){value='
-
js限制文本框只能输入数字方法小结
有时需要限制文本框输入内容的类型,本节分享下正则表达式限制文本框只能输入数字.小数点.英文字母.汉字等代码. 例如,输入大于0的正整数 复制代码 代码如下: <input onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.valu
-
JS简单获取并修改input文本框内容的方法示例
本文实例讲述了JS简单获取并修改input文本框内容的方法.分享给大家供大家参考,具体如下: 一 介绍 获取文本框并修改其内容可以使用getElementById()方法来实现. getElementById()方法可以通过指定的id来获取HTML标记,并将其返回. 语法: sElement=document.getElementById(id) sElement:用来接收该方法返回的一个对象. id:用来设置需要获取HTML标记的id值. 二 应用 获取文本框并修改其内容 在页面加载后的文本框
-
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
本文实例讲述了js实现文本框中输入文字页面中div层同步获取文本框内容的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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.o
-
python TKinter获取文本框内容的方法
如下所示: #coding:utf-8 import urllib,urllib2 import Tkinter #导入TKinter模块 ytm=Tkinter.Tk() #创建Tk对象 ytm.title("login") #设置窗口标题 ytm.geometry("300x300") #设置窗口尺寸 l1=Tkinter.Label(ytm,text="用户名") #标签 l1.pack() #指定包管理器放置组件 user_text=Tk
-
jQuery实现点击下拉框中的值累加到文本框中的方法示例
本文实例讲述了jQuery实现点击下拉框中的值累加到文本框中的方法.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale
-
C#简单获取全屏中鼠标焦点位置坐标的方法示例
本文实例讲述了C#简单获取全屏中鼠标焦点位置坐标的方法.分享给大家供大家参考,具体如下: using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Drawing; using System.Threading; namespace ConsoleApplication1 { class Program { static void Main(string[]
-
jQuery简单实现input文本框内灰色提示文本效果的方法
本文实例讲述了jQuery简单实现input文本框内灰色提示文本效果的方法.分享给大家供大家参考,具体如下: $(function(){ $(".grayTips").each(function(){ //遍历每个文本框 var objTextBox=$(this); var oldText=$.trim(objTextBox.val()); objTextBox.css("color","#888"); objTextBox.focus(fun
-
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
本文实例讲述了jQuery简单实现的HTML页面文本框模糊匹配查询功能.分享给大家供大家参考,具体如下: 项目中需要用到此功能,使用过EasyUI中的Combobox,网上也搜过相应的解决办法,对于我的项目来说都不太合适,因为我还是喜欢比较纯粹的东西,就自己动手写了一个,比较简单,但还算能用,我的项目中也已经使用上了,做了个小demo作为记录,有需要的自己复制代码改一改就好了. 使用在线HTML/css/JavaScript运行工具:http://tools.jb51.net/code/Html
-
vue 自定义指令自动获取文本框焦点的方法
HTML: <p><b v-show="show">{{tag}}</b><input v-focus v-model="tag" :hidden="show" type="text"></p> js: 官方例子: directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } } } 我的
随机推荐
- 图解js图片轮播效果
- ASP.NET中GridView的文件输出流方式
- android TextView不用ScrollViewe也可以滚动的方法
- 详解C++设计模式编程中对访问者模式的运用
- the sourcesafe database has been locked by the administrator之解决方法
- php模仿asp Application对象在线人数统计实现方法
- 原生js实现瀑布流布局
- 一个无限级XML绑定跨框架菜单(For IE)
- JavaScript内存管理介绍
- C语言模拟实现C++的继承与多态示例
- MySQL编程中的6个实用技巧
- Javascript和Java获取各种form表单信息的简单实例
- Javascript点击按钮随机改变数字与其颜色
- JS实现带鼠标效果的头像及文章列表代码
- 快速展开Windows注册表编辑器分支
- 在Unity中捕捉Android的常用按钮返回事件
- 深入理解链表的各类操作详解
- 十天学会php(3)
- php中取得文件的后缀名?
- Android利用CircleImageView实现圆形头像的方法