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在事件监听方面的兼容性小结
Apr 07 Javascript
javascript中apply、call和bind的使用区别
Apr 05 Javascript
基于javascript实现最简单的选项卡切换效果
May 16 Javascript
easyui导出excel无法弹出下载框的快速解决方法
Nov 10 Javascript
Vue Spa切换页面时更改标题的实例代码
Jul 15 Javascript
vue组件学习教程
Sep 09 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
Vue.use源码学习小结
Jun 20 Javascript
Javascript 之封装(Package)
Sep 14 Javascript
微信小程序 image组件遇到的问题
May 28 Javascript
vue修改Element的el-table样式的4种方法
Sep 17 Javascript
js调用网络摄像头的方法
Dec 05 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
4月1日重磅发布!《星际争霸II》6.0.0版本更新
2020/04/09 星际争霸
二十行语句实现从Excel到mysql的转化
2006/10/09 PHP
php 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
Yii框架中 find findAll 查找出制定的字段的方法对比
2014/09/10 PHP
PHP时间类完整实例(非常实用)
2015/12/25 PHP
PHP实现动态压缩js与css文件的方法
2018/05/02 PHP
php常用的工具开发整理
2019/09/26 PHP
跟随鼠标旋转的文字
2006/11/30 Javascript
jquery validate使用攻略 第四步
2010/07/01 Javascript
纯js实现背景图片切换效果代码
2010/11/14 Javascript
javascript Window及document对象详细整理
2011/01/12 Javascript
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
js读取注册表的键值示例
2013/09/25 Javascript
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
chrome调试javascript详解
2015/10/21 Javascript
JavaScript的Vue.js库入门学习教程
2016/05/23 Javascript
javascript时间差插件分享
2016/07/18 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
总结4个方面优化Vue项目
2019/02/11 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
[00:13]天涯墨客二技能展示
2018/08/25 DOTA
Python做简单的字符串匹配详解
2017/03/21 Python
Python AES加密模块用法分析
2017/05/22 Python
Python 编码规范(Google Python Style Guide)
2018/05/05 Python
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
使用PyTorch将文件夹下的图片分为训练集和验证集实例
2020/01/08 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
德国咖啡批发商:Coffeefair
2019/08/26 全球购物
struct与class的区别
2014/02/03 面试题
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
工厂会计员职责
2014/02/06 职场文书
大学信息公开实施方案
2014/03/09 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
大学生安全教育心得体会
2016/01/15 职场文书
一篇带你入门Java垃圾回收器
2021/06/16 Java/Android