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 从if else 到 switch case 再到抽象
Jul 17 Javascript
JavaScript性能陷阱小结(附实例说明)
Dec 28 Javascript
javascript修改IMG标签的src问题
Mar 28 Javascript
JavaScript基础知识之方法汇总结
Jan 24 Javascript
如何使用AngularJs打造权限管理系统【简易型】
May 09 Javascript
Node.js返回JSONP详解
May 18 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
Dec 29 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
May 16 Javascript
vue-router的使用方法及含参数的配置方法
Nov 13 Javascript
详解vue引入子组件方法
Feb 12 Javascript
vue+animation实现翻页动画
Jun 29 Javascript
微信小程序实现简单购物车功能
Dec 30 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中随机显示图片的函数代码
2011/06/23 PHP
php skymvc 一款轻量、简单的php
2011/06/28 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
PHP5.5在windows安装使用memcached服务端的方法
2014/04/16 PHP
php伪静态之APACHE篇
2014/06/02 PHP
destoon之一键登录设置
2014/06/21 PHP
php导入大量数据到mysql性能优化技巧
2014/12/29 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
详解laravel安装使用Passport(Api认证)
2018/07/27 PHP
ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法
2018/09/26 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
php实现的支付宝网页支付功能示例【基于TP5框架】
2019/09/16 PHP
使javascript也能包含文件
2006/10/26 Javascript
js或者jquery判断图片是否加载完成实现代码
2013/03/20 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
微信小程序学习之数据处理详解
2017/07/05 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
2019/10/16 Javascript
JavaScript中Object、map、weakmap的区别分析
2020/12/15 Javascript
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
python 算法 排序实现快速排序
2012/06/05 Python
Python教程之全局变量用法
2016/06/27 Python
python 内置模块详解
2019/01/01 Python
python多进程 主进程和子进程间共享和不共享全局变量实例
2020/04/25 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
解决c++调用python中文乱码问题
2020/07/29 Python
Python3如何使用range函数替代xrange函数
2020/10/05 Python
CSS3教程:边框属性border的极致应用
2009/04/02 HTML / CSS
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
美国职棒大联盟的官方手套、球和头盔:Rawlings
2020/02/15 全球购物
成人大专自我鉴定范文
2013/10/19 职场文书
先进事迹材料怎么写
2014/12/30 职场文书
2015年挂职干部工作总结
2015/05/14 职场文书
2015中学教师个人工作总结
2015/07/22 职场文书
Pytorch中TensorBoard及torchsummary的使用详解
2021/05/12 Python
Nginx反向代理配置的全过程记录
2021/06/22 Servers
如何避免mysql启动时错误及sock文件作用分析
2022/01/22 MySQL