JS小Demo实战之今天外卖点什么?(三)
2016-02-05 20:53
791 查看
在JS小Demo实战之今天外卖点什么?(二)里面添加了判断输入框不能为空的功能。
总感觉输入框还是缺点什么。最近突然想到了,输入的值不应该有空格。不然会很不美观。
就像这样,
后面的空格虽然看不出了,但是可以在代码行里测试一下,比如说加一句
还是可以看出,麦当劳和aaa直接有一个明显的空格。
这是因为,在HTML结构里,空格的符号是 所以再多的空格,也就只变成了一个空格了。
言归正传,目的是去除输出框的所有空格,所以需要用的str的replace方法。
而且因为要匹配所以的空格,所以还要用到正则表达式,其实也很简单。
也不是特别麻烦,就是一行代码的事,在if选择之外加,
这样在输入结束之后,输入框就变成空白,就不用手从删除了。
至此,输入框的折腾就差不多了,最后再次附上网址。
欢迎大家拍砖指正,提出建议。
http://yangzhedi.github.io/takeout.html
总感觉输入框还是缺点什么。最近突然想到了,输入的值不应该有空格。不然会很不美观。
去除空格
虽然在将innerHTMl转化为li内的值的时候会自动去除innerHTML值前方的空格,而且还会把中间所有的空格变成一个空格。就像这样,
后面的空格虽然看不出了,但是可以在代码行里测试一下,比如说加一句
oLi.innerHTML=oLi.innerHTML+'aaa';结果就是这样的。
还是可以看出,麦当劳和aaa直接有一个明显的空格。
这是因为,在HTML结构里,空格的符号是 所以再多的空格,也就只变成了一个空格了。
言归正传,目的是去除输出框的所有空格,所以需要用的str的replace方法。
而且因为要匹配所以的空格,所以还要用到正则表达式,其实也很简单。
oLi.innerHTML=oLi.innerHTML.replace(/\s/ig,'');只需要在全局匹配空格,然后替换成空字符就行了。
清除输入框
如果输入框在点击加入按钮之后,还需要在手动删除,那么就有点不人性化了,所以还有在点击完按钮之后,将输入框原来的数据清除。也不是特别麻烦,就是一行代码的事,在if选择之外加,
oTxt.value=null;
这样在输入结束之后,输入框就变成空白,就不用手从删除了。
至此,输入框的折腾就差不多了,最后再次附上网址。
欢迎大家拍砖指正,提出建议。
http://yangzhedi.github.io/takeout.html
相关文章推荐
- Javascript的匿名函数与自执行
- eval解析JSON注意点
- js字符串方法(总结)
- 字符串的长度 -- js
- JavaScript面向对象:分页器类封装
- JavaScript面向对象的设计原则(二)
- css3 javascript 实现菜单按钮特效
- js事件处理 —— 详解
- js/json 数组的操作
- Json数组操作小记
- json传输二进制的方案
- *Firefox*的*Firebug*进行JavaScript调试
- JavaScript 覆盖document.createElement 方法 解决window.close在火狐下不兼容问题)
- 一些很少用到的js
- js全局变量和局部变量
- JSP有哪些内置对象和动作?它们的作用分别是什么?
- JavaScript高级程序设计学习笔记第五章--引用类型
- XML、HTML、CSS与JS的区别
- JavaScript系列(四:对象)
- [no]@json核心技术——《描述表》