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 相关文章推荐
Tab页界面,用jQuery及Ajax技术实现
Sep 21 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
Mar 03 Javascript
javascript弹出页面回传值的方法
Jan 28 Javascript
JavaScript中的fontsize()方法使用详解
Jun 08 Javascript
JS图片预加载插件详解
Jun 21 Javascript
纯js实现隔行变色效果
Nov 29 Javascript
vue实现图片加载完成前的loading组件方法
Feb 05 Javascript
vue.js响应式原理解析与实现
Jun 22 Javascript
使用webpack打包后的vue项目如何正确运行(express)
Oct 26 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
May 12 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
Oct 23 Javascript
微信小程序实现时间进度条功能
Nov 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传输数据的代码
2007/11/13 PHP
JavaScript实现删除电脑的关机键
2016/07/26 PHP
PHP 中魔术常量的实例详解
2017/10/26 PHP
ThinkPHP中图片按比例切割的代码实例
2019/03/08 PHP
js 解决“options为空或不是对象”
2008/12/22 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
jquery实现页面关键词高亮显示的方法
2015/03/12 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
Vuex 使用 v-model 配合 state的方法
2018/11/13 Javascript
vue路由对不同界面进行传参及跳转的总结
2019/04/20 Javascript
vue实现短信验证码登录功能(流程详解)
2019/12/10 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
2020/09/21 Javascript
[19:15]DK战队纪录片
2014/09/02 DOTA
基于Django filter中用contains和icontains的区别(详解)
2017/12/12 Python
详解flask表单提交的两种方式
2018/07/21 Python
python调用百度语音识别api
2018/08/30 Python
对Python3.x版本print函数左右对齐详解
2018/12/22 Python
selenium 安装与chromedriver安装的方法步骤
2019/06/12 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
使用Numpy对特征中的异常值进行替换及条件替换方式
2020/06/08 Python
Django前后端分离csrf token获取方式
2020/12/25 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
基于HTML5 Canvas 实现商场监控实例详解
2017/11/20 HTML / CSS
WWE美国职业摔角官方商店:WWE Shop
2018/11/15 全球购物
新加坡第一的杂货零售商:NTUC FairPrice
2020/12/05 全球购物
标准导师推荐信(医学类)
2013/10/28 职场文书
2014年大学生四年规划书范文
2014/04/03 职场文书
七一建党日演讲稿
2014/09/05 职场文书
2015年测量员工作总结
2015/05/23 职场文书
楚门的世界观后感
2015/06/03 职场文书
高中英语教学反思范文
2016/03/02 职场文书
Java面试题冲刺第十五天--设计模式
2021/08/07 面试题