<input type="text"/>未输入时属性value的默认值--js学习之路
在百度ife刷题是自己的一个错误引发了我对<input type="text"/>的学习。
先贴代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>example</title>
</head>
<body>
<label for="weather_input">请输入北京今天空气质量：<input id="weather_input" type="text"/></label>
<button id="confirm_button">确认</button>
<p>你输入的值是：<span id="value_show">尚未输入</span></p>
<script type="text/javascript">
window.onload=function(){
var button=document.getElementById("confirm_button");
var span=document.getElementById("value_show");
var input=document.getElementById("weather_input").value;
button.onclick=function(){
span.innerHTML=input;
}
}
</script>
</body>
</html>
这段代码语法上是正确的，不过逻辑上是有问题的：var input=document.getElementById("weather_input").value；该语句中input获取了input输入框的默认值，之后再触发button.onclick时，input的值无法即时更新，也就无法达到程序即时显示效果。
这引出了今天探讨的问题：在<input type="text"/>中未规定value的初始值同时用户未输入时，value的默认值是什么？
null还是undefined还是""？
从var input=document.getElementById("weather_input").value看，我们可以看到document.getElementById("weather_input")这个元素节点对象是存在的，不为空，因此排除null。
至于到底是""还是undefined，我通过实践找到了答案。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>example</title>
</head>
<body>
<label for="weather_input">请输入北京今天空气质量：<input id="weather_input" type="text"/></label>
<button id="confirm_button">确认</button>
<p>你输入的值是：<span id="value_show">尚未输入</span></p>
<script type="text/javascript">
window.onload=function(){
var button=document.getElementById("confirm_button");
var span=document.getElementById("value_show");
alert(document.getElementById("weather_input").value===undefined);//验证是否等于undefined
alert(document.getElementById("weather_input").value==="");//验证是否等于""
}
}
</script>
</body>
</html>
通过上述代码，我看到的程序运行结果是：第一个弹出框显示为false；第二个弹出框显示为true。
结论显而易见：在<input type="text"/>中未规定value的初始值同时用户未输入时，value的默认值是""。
<input type="text"/>未输入时属性value的默认值--js学习之路的更多相关文章
- input type =text，按回车键自动提交
1.当form表单中只有一个<input type="text" name='name' />时按回车键将会自动将表单提交 <form id='form1' ac ...
- HTML：<input type="text"> 输入数字时的验证！（在提交时验证）
<!--非负数:<input type="text" name="" pattern="^\d+$">--> < ...
- html5与js关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick="select();"。做购物车页面时会要用到。
关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="s ...
- <input type="text">和<textarea>的区别
在我们开发时经常需要用到输入框,通常解决办法就是<input type="text">和<textarea>,那么这两个标签有什么区别呢? 一:<i ...
- 限制input[type=number]的输入位数策略整理
当我们使用类型number的input输入框的时候,我们可能需要限制输入的位数,这个时候通常会想到maxlength,但是maxlength是在number类型的时候是不支持的,下面是一些解决这种问题 ...
- JavaScript通过preventDefault()使input[type=text]禁止输入但保留光标
一.说明 取消事件的默认动作. 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作).例如,如果 type 属性是 "submit",在事件传播的任意阶段 ...
- 对比<input type="text" id="">和<asp:TextBox runat="server" ID="">
首先这两个都是对应文本输入框形式: <input type="text"class="form-control"id="txt_add_pro_ ...
- html设置<input type="text">内的内容自动为大写
添加css样式:text-transform:uppercase;可以实现自动转换为大写样式. 但是input 的value还是小写的,因为它是CSS样式. <input type=" ...
- js让text值不可改变，同<input type="text" readonly="readonly" />
<input type="text" size="60" name="j01" value="www.52jscn.com ...
随机推荐
- Fast 迅捷网络 无线路由器FW323的功能设置
一.问题的提出 1.有一个无线路由器,型号:Fast 迅捷网络 无线路由器FW323 2.有三个网络层级,第一级,用一个路由器A负责对接互联网,内网IP段为192.168.1.*,网关设置192.16 ...
- slf4j日志系统
slf4j:由外观模式实现,不是日志的解决方案,只是服务于各种各样的日志系统.可以让在应用部署的时候,选择合适的日志系统 slf4j + log4j : 配置日志文件:log4j.properties ...
- IEEEtran模版中添加中文：\usepackage{CJKutf8}
\documentclass[conference]{IEEEtran} \usepackage{cite} \usepackage{graphicx} \usepackage{CJKutf8} \b ...
- Vim 插件之 NERDTree
设置快键键 编辑 .vimrc 添加以下内容后,可以使用 ctrl + n 来开关 NERDTree 插件. map <silent> <C-n> :NERDTreeToggl ...
- [转]不定义JQuery插件，不要说会JQuery
一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写("#"),("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人,直 ...
- 2次成功投诉EMS和中国移动的经验
上个月要找房子,搬家很多事情,真实头疼...搬家还把腰闪了....现在还有点痛.然后中间碰到 移动宽带 移机的事情,搞得我非常火.然后想起去年投诉EMS的事情,在事情处理完成后,我果断总结了下来,让大 ...
- [OpenCV] Image Processing - Spatial Filtering
"利用给定像素周围的像素的值决定此像素的最终的输出值“ 教学效果: 策略: 1. 拉普拉斯,突出小细节: . 梯度,突出边缘: . 平滑过的梯度图像用于掩蔽: . 灰度变换,增加灰度动态范围 ...
- [OpenCV] Image Processing - Grayscale Transform
"每个像素的输出值只取决于其输入值" 重难点:Histogram equalization 参考:笑得很甜 http://blog.csdn.net/xiaowei_cqu/art ...
- SQL Server里ORDER BY的歧义性
在今天的文章里,我想谈下SQL Server里非常有争议和复杂的话题:ORDER BY子句的歧义性. 视图与ORDER BY 我们用一个非常简单的SELECT语句开始. -- A very simpl ...
- 说说jsonp
什么是jsonp jsonp充其量只能说是一种"方法".它可以让页面从其他域中获取资料. 首先要知道的是同源策略,在javascript中使用http请求(ajax)是会受到同 ...