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插件jbox使用iframe关闭问题
Feb 09 Javascript
Prototype RegExp对象 学习
Jul 19 Javascript
jQuery 使用手册(七)
Sep 23 Javascript
jquery 简单应用示例总结
Aug 09 Javascript
js showModalDialog弹出窗口实例详解
Jan 07 Javascript
js实现的黑背景灰色二级导航菜单效果代码
Aug 24 Javascript
jQuery实现美观的多级动画效果菜单代码
Sep 06 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
Feb 03 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
Aug 10 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
Sep 02 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
谈谈JavaScript中的垃圾回收机制
Sep 17 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获取网站百度快照日期的方法
2015/07/29 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
Expandable &quot;Detail&quot; Table Rows
2007/08/29 Javascript
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
2010/11/17 Javascript
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
js判断两个日期是否相等的方法
2013/09/10 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
jquery常用操作小结
2014/07/21 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
2016/08/02 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
JavaScript反弹动画效果的实现代码
2017/07/13 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
2017/10/24 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
[01:02:45]完美世界DOTA2联赛 LBZS vs Forest 第三场 11.07
2020/11/09 DOTA
[53:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第三场 1月18日
2021/03/11 DOTA
python网络编程调用recv函数完整接收数据的三种方法
2017/03/31 Python
详解python实现识别手写MNIST数字集的程序
2018/08/03 Python
Python实现基于POS算法的区块链
2018/08/07 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
python解压TAR文件至指定文件夹的实例
2019/06/10 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
移动端Web页面的CSS3 flex布局快速上手指南
2016/05/31 HTML / CSS
JD Sports瑞典:英国领先的运动时尚商店
2018/01/28 全球购物
中英文自我评价语句
2013/12/20 职场文书
继电保护工岗位职责
2014/01/05 职场文书
财务担保书范文
2014/04/02 职场文书
企业家王石演讲稿:坚持与放下
2014/04/27 职场文书
教师学习八项规定六项禁令思想汇报
2014/09/27 职场文书
交通肇事罪辩护词
2015/05/21 职场文书
给校长的建议书作文300字
2015/09/14 职场文书
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL