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 相关文章推荐
JavaScript Array对象扩展indexOf()方法
May 09 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
Js获取当前日期时间及格式化代码
Sep 17 Javascript
JS实现的几个常用算法
Nov 12 Javascript
Bootstrap栅格系统的使用和理解2
Dec 14 Javascript
微信小程序 支付简单实例及注意事项
Jan 06 Javascript
html5+canvas实现支持触屏的签名插件教程
May 08 Javascript
vue+web端仿微信网页版聊天室功能
Apr 30 Javascript
layui的layedit富文本赋值方法
Sep 18 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
Oct 24 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
Jul 09 Javascript
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 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
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
php设计模式之适配器模式原理、用法及注意事项详解
2019/09/24 PHP
jquery入门——事件机制之事件中的冒泡现象示例解释
2020/09/12 Javascript
jQuery ajax dataType值为text json探索分享
2013/09/23 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
jquery常用方法及使用示例汇总
2014/11/08 Javascript
IE8中动态创建script标签onload无效的解决方法
2014/12/22 Javascript
javascript日期处理函数,性能优化批处理
2015/09/06 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
2016/01/12 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
jQuery实现三级菜单的代码
2016/05/09 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
AngularJS基础 ng-open 指令简单实例
2016/08/02 Javascript
BootStrap入门教程(三)之响应式原理
2016/09/19 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
2019/05/14 jQuery
如何阻止小程序遮罩层下方图层滚动
2019/09/05 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
详解JavaScript中分解数字的三种方法
2021/01/05 Javascript
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
Python中尝试多线程编程的一个简明例子
2015/04/07 Python
Python中Random和Math模块学习笔记
2015/05/18 Python
Python中的zipfile模块使用详解
2015/06/25 Python
cmd运行python文件时对结果进行保存的方法
2018/05/16 Python
浅谈django三种缓存模式的使用及注意点
2018/09/30 Python
Python爬虫抓取指定网页图片代码实例
2020/07/24 Python
护士毕业自我鉴定
2014/02/07 职场文书
自荐信的基本格式
2014/02/22 职场文书
2014年五一劳动节社区活动总结
2014/04/14 职场文书
2015廉洁自律个人总结
2015/02/14 职场文书
单位工作证明范本
2015/06/15 职场文书
企业安全隐患排查治理制度
2015/08/05 职场文书
《比尾巴》教学反思
2016/02/24 职场文书
在JavaScript中如何使用宏详解
2021/05/06 Javascript