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 相关文章推荐
将光标定位于输入框最右侧实现代码
Dec 04 Javascript
关于javaScript注册click事件传递参数的不成功问题
Jul 18 Javascript
jQuery淡入淡出元素让其效果更为生动
Sep 01 Javascript
很棒的js选项卡切换效果
Jul 15 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
Jun 26 Javascript
Mongoose实现虚拟字段查询的方法详解
Aug 15 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
Oct 15 Javascript
基于Require.js使用方法(总结)
Oct 26 Javascript
JavaScript解析及序列化JSON的方法实例分析
Jan 04 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
Aug 04 Javascript
javascript操作元素的常见方法小结
Nov 13 Javascript
Vue与React的区别和优势对比
Dec 18 Vue.js
详解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程序中的常见漏洞进行攻击
2006/10/09 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
Laravel框架中自定义模板指令总结
2017/12/17 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
EasyUI中combobox默认值注意事项
2015/03/01 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
2015/08/21 Javascript
AngularJS转换响应内容
2016/01/27 Javascript
理解javascript中的with关键字
2016/02/15 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
JS经典正则表达式笔试题汇总
2016/12/15 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
2017/04/11 Javascript
jQuery.ajax向后台传递数组问题的解决方法
2017/05/12 jQuery
jquery+css3实现熊猫tv导航代码分享
2018/02/12 jQuery
vue和react等项目中更简单的实现展开收起更多等效果示例
2018/02/22 Javascript
vue2.0 资源文件assets和static的区别详解
2018/04/08 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
vue渲染方式render和template的区别
2020/06/05 Javascript
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
Python SQLite3数据库操作类分享
2014/06/10 Python
python发送邮件功能实现代码
2016/07/15 Python
用TensorFlow实现多类支持向量机的示例代码
2018/04/28 Python
python实现文件的备份流程详解
2019/06/18 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
Python字典实现伪切片功能
2020/10/28 Python
Cpython解释器中的GIL全局解释器锁
2020/11/09 Python
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
工程业务员岗位职责
2013/12/31 职场文书
勤奋学习演讲稿
2014/05/10 职场文书
深入开展党的群众路线教育实践活动心得体会
2014/11/05 职场文书
学校推普周活动总结
2015/05/07 职场文书
歌剧魅影观后感
2015/06/05 职场文书
职工宿舍管理制度
2015/08/05 职场文书
python基于tkinter制作下班倒计时工具
2021/04/28 Python