文档章节

vue中一个关于input元素的小坑

fattypanda
 fattypanda
发布于 2016/12/08 11:31
字数 317
阅读 543
收藏 1

        客户要求做了一个手机端的网站(使用vue2.0),要求能在大部分手机上没有问题,还要添加百度地图,扩展自己的功能。比如,我在百度地图生成了自己的搜索控件(搜索嘛,一定会有一个input元素)。

        当时直接使用的原生JS创建的DOM元素,并生成了一个input元素进行输入,但发现在safari浏览器不并不能输入。于是打开开发者工具进行调试,最后发现给input加上type="text"属性就可以输入了!!!???

        input的"type"不是默认就是"text"???

        接下来我又去创建了一个html文件就行测试,然后发现并不是safari的锅。

<html>
  <body>
    <!-- chrome,ie,safari都能输入 -->
    <input type="text">
    <!-- chrome,ie,safari都能输入 -->
    <input>
    <script>
      // chrome,ie,safari都能输入
      document.body.appendChild( document.createElement( 'input'));
    </script>
  </body>
</html>

        后来我又在vue2.0的环境下进行以上几测试,发现原来只是在vue里面才会出现这个问题,虽然并不明白为什么,但,个人猜测,可能是'.vue'进行解析编译时,进行了一些处理的原因吧。

© 著作权归作者所有

共有 人打赏支持
fattypanda
粉丝 0
博文 10
码字总数 2767
作品 0
渝北
程序员
私信 提问
Vue.js 快速入门

什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API。作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7 准备 我推荐使用sublime t...

鼎六智能
2016/09/30
1K
0
用 React 和 Vue 创建了两个完全相同的应用后,发现了这些差异

译者 jonjia 爱贝睿技术团队 在工作中使用 Vue 一段时间后,对它的工作原理有了相当深入的了解。然而,我很想知道篱笆另一边的草地是什么样 - React。 我已经阅读了 React 文档,也观看了一些...

爱贝睿技术团队
08/03
0
0
13、优化轮播图组件与vue深度处理器

前言:上篇讲了vue里面轮播图组件的使用,还有有个小问题可以优化一下。 github:https://github.com/Ewall1106/mall 1、焦点问题 我们看到这里的焦点会有一个默认的颜色,改变这个焦点颜色也...

Ewall_
06/22
0
0
面向Vue新人:使用Vue自定义指令来完善一个Select组件

本篇文章教大家写一个非常简单的Select组件,想必很多人都写过Select,毕竟它太常用了,但是本篇文章的示例使用到了Vue的自定义指令,如果你对Vue自定义指令不怎么熟悉的话,本篇文章或许会让...

limingru
05/23
0
0
vue 3.0 css 框架之页面样式混乱问题

这是自己在开发过程中遇到的小坑,都知道每个vue文件中有对应的css样式, 但是vue框架中每个vue页面的style必须加上scoped属性,如下图所示,代表仅对当前页面生效,否则在运行项目时页面样式...

YunOu
10/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

方之熙博士被任命为RISC-V基金会中国顾问委员会主席,加速RISC-V ISA在中国的应用

中国顾问委员会将就RISC-V基金会的教育和应用推广战略提供指导 今天在中国乌镇举行的世界互联网大会(World Internet Conference)上,RISC-V基金会(RISC-V Foundation)宣布,半导体行业资深人...

whoisliang
34分钟前
1
0
为了用户体验,不要做浏览器兼容

读者看到这篇文章的标题也许会感到奇怪,按照通常的经验来说,为了用户体验应该做浏览器兼容,以便让不同的浏览器用户都能有好的体验,从而增加网站的流量,但是我认为做浏览器兼容属于同样的...

Bob2100
34分钟前
1
0
分布式定时任务架构 (二) xxl-job二次开发实践

4个月前,公司有任务调度的需求,需要一周内完成,时间非常紧。 需求有三点: web界面编辑cron表达式,启动,停止任务 接入公司的rpc成本较低,公司有自研的rpc,研发人员希望共用同一套注解 ...

勇哥和你一起学技术
51分钟前
1
0
React和Redux的连接react-redux

通过Redux文档来了解react-redux,在一段时间的实践后准备翻一翻源代码,顺便做些相关的总结。我看的代码的npm版本为v4.0.0,也就是说使用的React版本是0.14.x。 react-redux提供两个关键模块...

前端攻城老湿
今天
1
0
1、Mybatis连接池配置 和 Context.xml的配置

注意: (1)mybatis 3.2 之前 通过 set get 方法 获取相关属性。之后通过属性姓名获取相关关联。 (2)mybatis 映射 优先为 sql 语句中的别名与实体类的属性进行映射。 (3)jndi Java用于调...

KingFightingAn
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部