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中模拟实现jsonp
Jun 19 Javascript
对于jQuery性能的一些优化建议
Aug 13 Javascript
angularjs创建弹出框实现拖动效果
Aug 25 Javascript
js css3实现图片拖拽效果
Mar 04 Javascript
AngularJS中使用three.js的实例详解
Jul 21 Javascript
element-ui 表格数据时间格式化的方法
Aug 24 Javascript
jquery.pagination.js分页使用教程
Oct 23 jQuery
你或许不知道的一些npm实用技巧
Jul 04 Javascript
JavaScript this使用方法图解
Feb 04 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
Jun 08 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
Nov 03 Javascript
vue实现可以快进后退的跑马灯组件
Apr 08 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实现查询两个数组中不同元素的方法
2016/02/23 PHP
PHPExcel实现的读取多工作表操作示例
2020/04/14 PHP
php连接mysql之mysql_connect()与mysqli_connect()的区别
2020/07/19 PHP
一个javascript参数的小问题
2008/03/02 Javascript
jQuery之折叠面板的深入解析
2013/06/19 Javascript
浅析JavaScript中的CSS属性及命名规范
2013/11/28 Javascript
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
使用jQuery判断IE浏览器版本的代码
2014/06/14 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
2016/06/21 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
BootStrap数据表格实例代码
2017/09/13 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
2018/05/26 jQuery
Node.js Buffer模块功能及常用方法实例分析
2019/01/05 Javascript
基于jQuery实现挂号平台首页源码
2020/01/06 jQuery
[51:20]完美世界DOTA2联赛PWL S2 Magma vs PXG 第一场 11.28
2020/12/01 DOTA
python插入数据到列表的方法
2015/04/30 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
Python 3.8中实现functools.cached_property功能
2019/05/29 Python
Pytorch 中retain_graph的用法详解
2020/01/07 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
python GUI库图形界面开发之PyQt5选项卡控件QTabWidget详细使用方法与实例
2020/03/01 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
Python创建自己的加密货币的示例
2021/03/01 Python
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
.NET现在共支持多少种语言
2014/02/26 面试题
幼儿教师个人求职信范文
2013/09/21 职场文书
美发活动策划书
2014/01/14 职场文书
大学毕业自我鉴定范文
2014/02/03 职场文书
医学检验专业自荐信
2014/09/18 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书
详解Apache SkyWalking 告警配置指南
2021/04/22 Servers
Spring整合Mybatis的全过程
2021/06/28 Java/Android