使用“原生”HTML DOM获取input的输入值并显示
理论基础
HTML <input> value属性。value规定<input>元素的值。value对于不同input类型,用法也不同。
1.对于"button","reset","submit"类型 —— 定义按钮上的文字;
2.对于"text","password","hidden"类型 ——定义输入字段的初始(默认)值;
3.对于"checkbox","radio","image"类型 ——定义与input元素相关的值,当提交表单时该值会发送到表单的action URL。
最需要注意的是 ,value属性对于<input type="checkbox">和<input type="radio">是必需的。而对于<input type="file"> value属性是不适用的。
实现原理
使用document.getElementByid("idName").value获取元素的值,然后输出到页面上。
实现代码
<h1>登录</h1>
<small>本网页展示了使用HTML DOM来访问HTML元素最常用的方法</small>
<hr/> Account <input type="text" id="account" value="15515"><br/>
Password <input type="password" id="pwd" value="123456"><br/>
<input type="button" value="Show Values" onclick="getValue()">
<hr/>
<p id="show"></p> <script>
var a = document.getElementById("account").value;
var p = document.getElementById("pwd").value;
function getValue() {
document.getElementById("show").innerHTML = "Account: " + a + "<br/>" + "Password: " + p;
}
效果图
使用“原生”HTML DOM获取input的输入值并显示的更多相关文章
- js通過name获取input框输入值
var account = $("input[name='account']").val();//获取input框输入值
- 小程序批量获取input的输入值,监听输入框,数据同步
在使用小程序时,跟vue的数据绑定不一样,没有v-model这个属性了,官网也只是给了一些事件监听. 但是我们如果有多个表单时,需要写多个事件来同步数据.这样做很麻烦.下面的方法可以解决,只需要一个方 ...
- Vue(4)- 获取原生的DOM的方式、DIY脚手架、vue-cli的使用
一.获取原生的DOM的方式 在js中,我们可以通过id.class或者标签获取DOM元素,vue中也为我们提供了获取原生DOM的方法,就是给标签或者组件添加ref属性,通过this.$refs获取,如 ...
- Vue 4 -- 获取原生的DOM的方式、DIY脚手架、vue-cli的使用
一.获取原生的DOM的方式 在js中,我们可以通过id.class或者标签获取DOM元素,vue中也为我们提供了获取原生DOM的方法,就是给标签或者组件添加ref属性,通过this.$refs获取,如 ...
- 获取原生的DOM方式,DIY脚手架,vue-cli的使用
一 . 获取原生的DOM的方式 在js中,我们可以通过id, class 或者标签获取DOM元素,vue中也为我们提供了获取原生DOM的方法,就是给标签或者组件添加 ref 属性,通过 this.$r ...
- vue之获取原生的dom的方式
1.获取原生的DOM的方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- 原生js dom记忆的内容
1.DOM基础getElementByIdgetElementByTagNamegetElementByName getElementsByClass querySelector querySelec ...
- mui选择器和dom获取元素的区别(记得把mui对象转为dom对象才能调用用dom方法)
<!DOCTYPE html><html> <head><meta charset="UTF-8"><meta name=&q ...
- js/jquery 获取本地文件的文件路劲 获取input框中type=‘file’ 中的文件路径(转载)
原文:http://blog.csdn.net/niyingxunzong/article/details/16989947 js/jquery 获取本地文件的文件路劲 获取input框中type= ...
随机推荐
- http协议读书笔记1-概述
1.http协议在网络中的位置: http协议位于TCP协议的上层,http试用tcp来传输其报文数据,tcp在ip的上层. 2.浏览器发起连接的过程 上述图的过程是: 浏览器从url中解析出服务区的 ...
- Web app 的性能瓶颈与性能调优方法
1. web app 性能测试工具使用 2. mysql 性能分析与调优方法
- java后台进程和线程优先级
1. 后台线程:处于后台运行,任务是为其他线程提供服务.也称为“守护线程”或“精灵线程”.JVM的垃圾回收就是典型的后台线程. 特点:若所有的前台线程都死亡,后台线程自动死亡. 设置后台线程:Thre ...
- [Javascript] The "this" keyword
The very first thing to understand when we're talking about this-keyword is really understand what's ...
- LINUNX下PHP下载中文文件名代码
function get_basename($filename){ return preg_replace('/^.+[\\\\\\/]/', '', ...
- Filter之——GZIP全站压缩
GZIP压缩:将压缩后的文本文件,发送给浏览器,减少流量. 一.进行gzip压缩条件: 1.请求头:Accept-Encoding : gzip 告诉服务器,该浏览器支持gzip压缩. 2.响应头: ...
- 通过Jni实现AES的CBC模式加密解密
AES加密方式基本实现,出现一个问题就是代码的安全性.我们知道java层代码很容易被反编译,很有可能泄漏我们加密方式与密钥 内容,那我们该怎么办呢?我们可以使用c/c++实现加密,编译成So库的形式, ...
- Phantomjs 一些简单实用
Phantomjs是一个基于webkit的服务器端JavaScirpt API.它全面支持web而不需要浏览器支持,并且原生支持web的各种标准:DOM处理,CSS选择器,JSON,Canvas和SV ...
- 实时流式计算框架Storm 0.9.0发布通知(中文版)
Storm0.9.0发布通知中文翻译版(2013/12/10 by 富士通邵贤军 有错误一定告诉我 shaoxianjun@hotmail.com^_^) 我们很高兴宣布Storm 0.9.0已经成功 ...
- Part 1: Running Oracle E-Business Suite on Oracle Cloud
You can now run Oracle E-Business Suite on Oracle Cloud. EBS customers can take advantage of rapid ...