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代码
Mar 05 Javascript
初窥JQuery(一)jquery选择符 必备知识点
Nov 25 Javascript
判断ie的两种简单方法
Aug 12 Javascript
js 3种归并操作的实例代码
Oct 30 Javascript
jsp网页搜索结果中实现选中一行使其高亮
Feb 17 Javascript
浅谈Angular.js中使用$watch监听模型变化
Jan 10 Javascript
原生js轮播特效
May 18 Javascript
关于Vue Webpack2单元测试示例详解
Aug 14 Javascript
javascript动态创建对象的属性详解
Nov 07 Javascript
利用JS响应式修改vue实现页面的input值
Sep 02 Javascript
JavaScript RegExp 对象用法详解
Sep 24 Javascript
vue 实现把路由单独分离出来
Aug 13 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 在5.1.* 和5.2.*之间 PDO数据库操作中的不同之处小结
2012/03/07 PHP
在wamp集成环境下升级php版本(实现方法)
2013/07/01 PHP
php中session_id()函数详细介绍,会话id生成过程及session id长度
2015/09/23 PHP
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
PHP模板引擎Smarty中变量的使用方法示例
2016/04/11 PHP
ThinkPHP3.2框架使用addAll()批量插入数据的方法
2017/03/16 PHP
PHP实现数组根据某个单元字段排序操作示例
2018/08/01 PHP
通过JAVAScript实现页面自适应
2007/01/19 Javascript
HTML DOM的nodeType值介绍
2011/03/31 Javascript
jquery如何把数组变为字符串传到服务端并处理
2014/04/30 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
vue+axios+mock.js环境搭建的方法步骤
2018/08/28 Javascript
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
详解js模板引擎art template数组渲染的方法
2018/10/09 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
2018/11/06 Javascript
Vue实现商品分类菜单数量提示功能
2019/07/26 Javascript
react实现同页面三级跳转路由布局
2019/09/26 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
使用next.js开发网址缩短服务的方法
2020/06/17 Javascript
vue+animation实现翻页动画
2020/06/29 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
用Python编写简单的定时器的方法
2015/05/02 Python
Python实现读取字符串按列分配后按行输出示例
2018/04/17 Python
对python捕获ctrl+c手工中断程序的两种方法详解
2018/12/26 Python
Python3之乱码\xe6\x97\xa0\xe6\xb3\x95处理方式
2020/05/11 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
利用CSS3的定位页面元素
2009/08/29 HTML / CSS
全球性的在线商店:Vogca
2019/05/10 全球购物
幼儿园教师备课制度
2014/01/12 职场文书
服装仓管员岗位职责
2014/06/17 职场文书
我是一名护士演讲稿
2014/08/28 职场文书
2014旅游局领导班子四风问题对照检查材料思想汇报
2014/09/19 职场文书
收银员岗位职责
2015/02/03 职场文书
门卫管理制度范本
2015/08/05 职场文书
python基础入门之字典和集合
2021/06/13 Python