在百度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学习之路的更多相关文章

  1. input type =text，按回车键自动提交

    1.当form表单中只有一个<input type="text" name='name' />时按回车键将会自动将表单提交 <form id='form1' ac ...

  2. HTML：<input type="text"> 输入数字时的验证！（在提交时验证）

    <!--非负数:<input type="text" name="" pattern="^\d+$">--> < ...

  3. html5与js关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick="select();"。做购物车页面时会要用到。

    关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="s ...

  4. <input type="text">和<textarea>的区别

    在我们开发时经常需要用到输入框,通常解决办法就是<input type="text">和<textarea>,那么这两个标签有什么区别呢?  一:<i ...

  5. 限制input[type=number]的输入位数策略整理

    当我们使用类型number的input输入框的时候,我们可能需要限制输入的位数,这个时候通常会想到maxlength,但是maxlength是在number类型的时候是不支持的,下面是一些解决这种问题 ...

  6. JavaScript通过preventDefault()使input[type=text]禁止输入但保留光标

    一.说明 取消事件的默认动作. 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作).例如,如果 type 属性是 "submit",在事件传播的任意阶段 ...

  7. 对比<input type="text" id="">和<asp:TextBox runat="server" ID="">

    首先这两个都是对应文本输入框形式: <input type="text"class="form-control"id="txt_add_pro_ ...

  8. html设置<input type="text">内的内容自动为大写

    添加css样式:text-transform:uppercase;可以实现自动转换为大写样式. 但是input 的value还是小写的,因为它是CSS样式. <input type=" ...

  9. js让text值不可改变，同<input type="text" readonly="readonly" />

    <input type="text" size="60"  name="j01" value="www.52jscn.com ...

随机推荐

  1. Android showing LoadingView or EmptyView for Activity or Fragment

    这几天利用一些时间,整理了一下,写了一个简单的工具类,用来快速的显示LoadingView或者EmptyView,以前都是定义一个layout,根布局为FrameLayout,再在layout布局文件 ...

  2. 在没安装OFFICE的服务器SSIS中进行EXCEL的ETL操作！

    由于OFFICE 2010的安装包比较庞大,如果仅仅为了在服务器中实现操作EXCEL,完全没有必要安装整个OFFICE,是否可以不装OFFICE也实现与OFFICE文件的互相操作呢?答案是肯定的,在S ...

  3. android px dp sp

    http://www.zcool.com.cn/article/ZMTUxODQw.html

  4. android 视频的缩略图 缓存机制和 异步加载缩略图

    在这次的工作开发项目中,涉及到一个视频缩略图的视频列表:这个在大家看来,制作视频缩略图就是两行代码就搞定的事.确实是这样的,百度一下,每个帖子都知道制作视频缩略图的方法,在这里确实也是一样的,但是我要 ...

  5. 如何在shell中打印出带颜色的字符?

    先看如下的效果: 方法: 先看如下的脚本sh3.sh: #!/bin/bash echo "peng" echo "$(color bold yellow) ------ ...

  6. WebApi 集成 Swagger

    1. Swagger(俗称:丝袜哥)是什么东西? Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同 ...

  7. String-------RegularHelper

    /// <summary> /// 正则表达式相关方法集合 /// </summary> public static class RegularHelper { private ...

  8. mysql truncate带有被引用外键的表时报错解决方法

    清空具有外键约束的表时报ERROR 1701(42000)的解决   mysql> truncate table t_users;ERROR 1701 (42000): Cannot trunc ...

  9. mysql 查看当前登陆用户匹配原则及权限user()与current_user()

    Mysql在进行登陆时,会去匹配mysql库中的user表,并赋予相应的权限,但是怎么知道我们当时的登陆的用户名及相应的权限呢? 在Mysql中,有两个函数,一个是user(),一个是current_ ...

  10. SQL Server中的连接查询【内连接，左连接，右连接，。。。】

    在查询多个表时,我们经常会用“连接查询”.连接是关系数据库模型的主要特点,也是它区别于其它类型数据库管理系统的一个标志. 什么是连接查询呢? 概念:根据两个表或多个表的列之间的关系,从这些表中查询数据 ...