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 相关文章推荐
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 Javascript
浅谈Javascript 执行顺序
Dec 18 Javascript
jquery.post用法关于type设置问题补充
Jan 03 Javascript
javascript中sort排序实例详解
Jul 24 Javascript
利用node实现一个批量重命名文件的函数
Dec 21 Javascript
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
JavaScript ES2019中的8个新特性详解
Feb 20 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 Javascript
vue2 拖动排序 vuedraggable组件的实现
Aug 08 Javascript
Vue设置长时间未操作登录自动到期返回登录页
Jan 22 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 Javascript
小程序实现列表倒计时功能
Jan 29 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
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
PHP n个不重复的随机数生成代码
2009/06/23 PHP
PHP Array交叉表实现代码
2010/08/05 PHP
PHP pathinfo()获得文件的路径、名称等信息说明
2011/09/13 PHP
微信开发之获取JSAPI TICKET
2017/07/07 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
angularjs表格ng-table使用备忘录
2016/03/09 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
Sequelize中用group by进行分组聚合查询
2016/12/12 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
2017/03/23 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
详解JS中的柯里化(currying)
2017/08/17 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
2018/09/01 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
2018/09/07 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
跟老齐学Python之使用Python操作数据库(1)
2014/11/25 Python
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
Python random库使用方法及异常处理方案
2020/03/02 Python
pyinstaller打包成无控制台程序时运行出错(与popen冲突的解决方法)
2020/04/15 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
如何表示python中的相对路径
2020/07/08 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
vue.js刷新当前页面的实例讲解
2020/12/29 Python
用HTML5 实现橡皮擦的涂抹效果的教程
2015/05/11 HTML / CSS
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
环境工程与管理大学毕业生求职信
2013/10/02 职场文书
幼儿园开学家长寄语
2014/01/19 职场文书
幼儿园庆六一活动方案
2014/03/06 职场文书
公司总经理任命书
2014/06/05 职场文书
食品安全汇报材料
2014/08/18 职场文书
晋江市人民政府党组群众路线教育实践活动整改方案
2014/10/25 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书