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 相关文章推荐
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
Mar 23 Javascript
事件模型在各浏览器中存在差异
Oct 20 Javascript
Highcharts 非常实用的Javascript统计图demo示例
Jul 03 Javascript
JavaScript中继承用法实例分析
May 16 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 Javascript
JavaScript实现页面跳转的几种常用方式
Nov 28 Javascript
通过设置CSS中的position属性来固定层的位置
Dec 14 Javascript
jQuery设置Easyui校验规则(推荐)
Nov 21 Javascript
AngularJS $http模块POST请求实现
Apr 08 Javascript
利用JS制作万年历的方法
Aug 16 Javascript
javascript数据类型中的一些小知识点(推荐)
Apr 18 Javascript
js面试题之异步问题的深入理解
Sep 20 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
杏林同学录(六)
2006/10/09 PHP
PHP使用适合阅读的格式显示文件大小的方法
2015/03/05 PHP
学习php设计模式 php实现门面模式(Facade)
2015/12/07 PHP
PHP命名空间与自动加载类详解
2018/09/04 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
IE与firefox下Dhtml的一些区别小结
2009/12/02 Javascript
跟着JQuery API学Jquery 之二 属性
2010/04/09 Javascript
html5+javascript实现简单上传的注意细节
2016/04/18 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
2017/02/13 Javascript
微信小程序利用co处理异步流程的方法教程
2017/05/20 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
浅谈vue.js导入css库(elementUi)的方法
2018/03/09 Javascript
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
如何从0开始用node写一个自己的命令行程序
2018/12/29 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
详解 微信小程序开发框架(MINA)
2019/05/17 Javascript
Vue 自定义指令功能完整实例
2019/09/17 Javascript
如何在Vue中抽离接口配置文件
2019/10/31 Javascript
element实现合并单元格通用方法
2019/11/13 Javascript
深入理解python对json的操作总结
2017/01/05 Python
Python实现的递归神经网络简单示例
2017/08/11 Python
Django中使用Whoosh进行全文检索的方法
2019/03/31 Python
pycharm新建一个python工程步骤
2019/07/16 Python
python 微信好友特征数据分析及可视化
2020/01/07 Python
Python对wav文件的重采样实例
2020/02/25 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
python ssh 执行shell命令的示例
2020/09/29 Python
python 简单的调用有道翻译
2020/11/25 Python
CSS去掉A标签(链接)虚线框的方法
2014/04/01 HTML / CSS
美国单身专业人士在线约会网站:EliteSingles
2019/03/19 全球购物
PHP如何防止SQL注入
2014/05/03 面试题
师范生实习个人的自我评价
2013/09/28 职场文书
师范生实习自我鉴定
2013/11/01 职场文书
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
Android开发之底部导航栏的快速实现
2022/04/28 Java/Android