百度前端学院-任务十三

Task： 用户可以在输入框中输入任何内容，点击“确认填写”按钮后，用户输入的内容会显示在“您输入的值是”文字的右边。详情：ife.baidu.com/2016/task/detail?taskId=13

Code：

<!DOCTYPE html>
<html>
      <head>
        <meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
        <title>IFE JavaScript Task 01</title>
      </head>
<body>
      <label>请输入北京今天空气质量：<input id="aqi-input" type="text"></label>
      <button id="button" onclick="textchange()">确认填写</button>
      <div>您输入的值是：<span id="aqi-display">尚无录入</span></div>

<script type="text/javascript">
(function(){
    var $ = function(id){
        return document.getElementById(id);
    }
    var handler = function(){
        var num = parseInt($("aqi-input").value);
        if (num >= 0 && num <= 1000 && !isNaN(num)) {
            $("aqi-display").innerHTML = num;
        }else{
            $("aqi-display").innerHTML = "请输入正确的格式";
        }
    }
    $("button").onclick = function(){
        handler();
    }
    $("aqi-input").onkeyup = function(){
        if (event.keyCode === 13) {
            handler();
        }
    }
})()
</script>
</body>
</html>

 

Demo: 待补充

Notes：

  • 将 document.getElementById(id) 封装为 $(id)，简化代码输入。
  • 用户输入内容的验证： 使用parseInt()方法将用户输入内容转化为数值，如果数值在0~1000范围内，且不是NaN，则通过验证。
  • 除了点击确认按钮提交之外，也要考虑到用户使用回车键提交的情况，因此添加“onkeyup”事件。
  • 检测是否按下并释放键盘的某个按键，可以通过keyup事件的event.keyCode属性来判断。

Learn more：

  • parseInt() 方法可以将字符串转换为整数，转换规则为：
    • 忽略字符串前面的空格，直到找到第一个分空格字符，如果第一个字符不是数字字符或者负号，则返回NaN；
    • 如果第一个字符是数字字符，则会继续解析第二个字符，直到遇到一个非数字字符。如“   1234abcd”被解析为1234，“22.52”被解析为22（因为小数点是非数字字符）；
    • 如果字符串以“0x”开头且后跟数字字符，则解析为16进制整数；以“0”开头且后跟数字字符，则解析为8进制整数；可以向parseInt方法传递第二个参数，指明要返回的进制数；
  • isNaN() 方法接收一个参数之后，会尝试将这个参数转换为数值，如果能转换为数值，则返回true，否则返回false。
  • keydown事件在按下键盘任意键时触发，keypress在按下键盘字符键时触发，keyup在释放键盘按键时触发。

 

posted @ 2017-03-03 14:06  midoDaddy  阅读(212)  评论(0)    收藏  举报