JS简单获取并修改input文本框内容的方法示例


Posted in Javascript onApril 08, 2018

本文实例讲述了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>3water.com 获取文本框并修改其内容</title>
</head>
<body>
<script language="javascript">
 <!--
 function c1()
 {
 var t=document.getElementById("txt");
 t.value="3water.com 修改文本内容"
 }
 -->
</script>
<input type="text" id="txt" value="初始文本内容" size="30"/>
<input type="button" value="更改文本内容" name="btn" onclick="c1();" />
</body>
</html>

四 运行结果

JS简单获取并修改input文本框内容的方法示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
一步一步制作jquery插件Tabs实现过程
Jul 06 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
Jul 15 Javascript
js动态创建表格,删除行列的小例子
Jul 20 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
Dec 12 Javascript
JS+CSS实现Li列表隔行换色效果的方法
Feb 16 Javascript
详解JavaScript中的事件流和事件处理程序
May 20 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
May 23 Javascript
jQuery grep()方法详解及实例代码
Oct 30 Javascript
Node.js中的child_process模块详解
Jun 08 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 Javascript
vue子传父关于.sync与$emit的实现
Nov 05 Javascript
浅谈Vue 函数式组件的使用技巧
Jun 16 Javascript
详解vue表单——小白速看
Apr 08 #Javascript
JS简单实现动态添加HTML标记的方法示例
Apr 08 #Javascript
React Router v4 入坑指南(小结)
Apr 08 #Javascript
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 #Javascript
vue2.0 资源文件assets和static的区别详解
Apr 08 #Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
Apr 08 #Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 #Javascript
You might like
php对文件夹进行相关操作(遍历、计算大小)
2015/11/04 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
执行iframe中的javascript方法
2008/10/07 Javascript
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
2010/03/21 Javascript
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
2015/09/15 Javascript
javascript实现tab切换的四种方法
2015/11/05 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
JS使用正则实现去掉字符串左右空格的方法
2016/12/27 Javascript
JavaScript显式数据类型转换详解
2019/03/18 Javascript
vue实现搜索功能
2019/05/28 Javascript
jquery实现下载图片功能
2019/07/18 jQuery
jQuery列表动态增加和删除的实现方法
2020/11/05 jQuery
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
2021/02/05 Javascript
[43:58]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第一场 1月8日
2021/03/11 DOTA
python实现的爬取电影下载链接功能示例
2019/08/26 Python
django-rest-swagger的优化使用方法
2019/08/29 Python
Python提取PDF内容的方法(文本、图像、线条等)
2019/09/25 Python
Python requests接口测试实现代码
2020/09/08 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
使用JS+CSS3技术:让你的名字动起来
2013/04/27 HTML / CSS
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
Hanky Panky官方网站:内衣和睡衣
2019/07/25 全球购物
办理信用卡工作证明
2014/01/11 职场文书
家长对孩子评语
2014/01/30 职场文书
科技开发中心办公室主任岗位责任制
2014/02/10 职场文书
劳模先进事迹材料
2014/12/24 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
教你使用VS Code的MySQL扩展管理数据库的方法
2022/01/22 MySQL
Window server 2012 R2 AD域的组策略相关设置
2022/04/28 Servers