uniapp中点击输入框禁止input获取焦点

场景：输入框与发送按钮是兄弟关系。输入框获取焦点时会唤起键盘，点击发送的输入框会失去焦点。

要求：点击发送按钮时，输入框不能失去焦点，键盘一直呈现唤出状态

分析：

当我们点击某一个元素时，这个元素就会默认获取焦点，在上述场景中，输入框在获取焦点时会唤出键盘，但是由于发送按钮与输入框不是同一个Dom元素，所以点击发送按钮时输入框就会失去焦点，发送按钮就会回去焦点，键盘就是收起。

如果阻止点击Dom元素的默认获得焦点这个事情，那么上一个获取焦点的Dom元素就不会失去焦点。也就是输入框不会失去焦点，键盘就不会收起

*** 作：发送按钮的事件用@touchendprevent=“ ”

touchend（触屏事件） prevent（阻止默认事件）

例子：

<view class="send" :class="sendMsgClass" @touchendprevent="sendText">

<view class="btn">发送</view>

</view>

如果分析的不对，请指教

taro单独为某个项目切换taro版本环境

单独为某一个项目升级#这样做的好处是全局的 Taro 版本还是 1x 的，多个项目间的依赖不冲突，其余项目依然可以用旧版本开发。 如果你的项目里没有安装 Taro CLI，你需要先装一个：

# 如果你使用 NPM

$ npm install --save-dev @tarojs/cli@2x

# 如果你使用 Yarn

$ yarn add -D @tarojs/cli@2x

echarts在小程序中滑动卡顿

由于微信小程序中，echarts的层级最高，无论设置多大层级也无法遮住echarts。而且小程序中好像只能用echarts吧。所以为了解决这个bug，我只能委屈求全了。打开ec-canvaswxml文件，将touchStart、touchMove和touchEnd去掉了，直接删除就好啦。这三个事件应该是做缩放的吧，我们也没有这个缩放的需求。所以就去掉了。虽然暂时满足的需求，还是没有真正的解决问题。

原：

bindinit="init"

bindtouchstart="{{ ecdisableTouch '' : 'touchStart' }}"

bindtouchmove="{{ ecdisableTouch '' : 'touchMove' }}"

bindtouchend="{{ ecdisableTouch '' : 'touchEnd' }}"

现：

bindinit="init"

echarts在小程序中无法跟随页面滑动

在卡顿问题中能与echarts交互少的，可以直接使用代替cannvas，即在echarts渲染完毕后将它替换为一张。

如果我更新了数据，那么就重新放出echarts，等它渲染完毕后，再次替换为一张。

charton('finished', () => {

getCurrentInstance()pageselectComponent(id)canvasToTempFilePath({

success: res => {

consolelog('restempFilePath====',restempFilePath)

thissetState({

echartImgSrc: restempFilePath

      })

},

    fail: res =>consolelog('转换失败', res)

});

})

render:

thisstateechartImgSrc ==''

  ref={thisrefChart}

id={thisstateid}

canvas-id="mychart-area"

  force-use-old-canvas="true"

  ec={thisstateec}

/>

:

<CoverImage src={thisstateechartImgSrc}></CoverImage>

1 先找到所有具有[ontouchedend]属性的节点；设置一个变量moved来标识是否有移动过，初始值为false；

2 绑定touchmove事件，将moved置为true；

3 绑定touchend事件，绑定函数的逻辑改成，如果moved为false，就执行原来函数(在这之前要获取到原来touchen属性的函数)；如果moved为true，将moved设置为初始值false；

需要用到：

1 $(“[ontouchend]”)each();

2 $(this)bind();

3 foobind(this, argument);

4 $(this)removeAttr();

5 jquery ready()的几种实现方法：①$(document)ready(){

}); ②$(function(){ })；还有几种不列举了

微信小程序（下面简称小程序）近些月来刷爆了我们这些程序猿们的圈子，可以说无数的程序猿磨刀霍霍，准备在这快蛋糕上杀出一片天地。那么作为前端开发人员，小程序开发和我们平常的开发有什么不同的地方呢？让我们一起来走进门里看看。 我们从下面几个方向来了解一下小程序的开发： 1/debug/wxadoc/dev/framework/structure/debug/wxadoc/dev/devtools/download/debug/wxadoc/dev/component/t=20161107） 组件的用法和标签一样，比如view组件< view>< / view>、text组件< text>< /view>。从写法上看起来和标签写法没什么区别，但是这些组件和标签最大的区别就是，组件本身设置了样式，比如icon组件： <view class="group"> <block wx:for="{{iconSize}}"> <icon type="success" size="{{item}}"></icon> </block> </view> 我们只需要使用icon组件，不需要去自己设置样式就可以得到对应的icon样式。 在日常小程序开发中，比较常用的组件有view和text，其中用的最多的就是view，view本身并没有默认太多的样式，只有一个display:block样式，所以在我看来view就类似于div，我们也就把它当作div来使用就行了，然后你就会发现布局的时候到处都是view~，就像下图： 满眼全是view这种写法不需要像html一样考虑语义、seo神马的，非常的简单粗暴~。 额外提一下text组件，text拥有view所没有的一个特性就是text组件内的文本可以被复制、可以被复制、可以被复制（重要的事情说三遍~）。如果你希望某段文本可以被复制，那么你只能使用text组件。同时需要注意的一点，text组件内部不能嵌套view组件！嵌套无效！ 2/debug/wxadoc/dev/framework/view/wxsshtmlt=20161107 二、JS差异 虽然小程序的交互采用的是js的语法，但是最大的变化就在于小程序无法使用选择器获取到页面的某个'dom'（应该不叫dom），这也是我们前端人员需要思路转变的地方，以往我们习惯于获取某个dom，然后这个dom上绑定各种事件，同时对页面进行一些改变 *** 作，但是小程序并没有提供这种我们习惯的方法。 不能获取dom，也不能直接 *** 作dom，那我们该怎么写呢？ 1 bind 和 catch bind和catch的作用从字面意思就可以大致猜出是用来绑定某些东西的，没错，这是小程序提供绑定事件的两个方法，而他们的区别在于bind不阻止冒泡，而catch阻止冒泡。小程序不提供获取dom的 *** 作，而是让我们直接将事件绑定写入到组件内，如下代码： <view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view> 看到这大家可能发现了bind后面跟着一个tap，这个tap是什么东东？ 2 tap tap其实就是一个事件，你可以理解为click，不过在手机端叫做tap，其它的事件还有：touchstart、touchmove、touchcancel、touchend、longtap。 bindtap=”tapName”组合起来就是绑定个tap事件,tapName则是对应的方法名，在这里需要注意一点，调用方法时不能够使用tapName(“txt”)这种形式来传参，小程序不支持。那么如果我们想要给方法传递一些参数该怎么做呢？接着往下看。 3event 我们先看一段代码： Page({ tapName: function(event) { consolelog(event) } }) 打印出来的结果: { "type":"tap", "timeStamp":895, "target": { "id": "tapTest", "dataset": { "hi":"WeChat" } }, "currentTarget": { "id": "tapTest", "dataset": { "hi":"WeChat" } }, "detail": { "x":53, "y":14 }, "touches":[{ "identifier":0, "pageX":53, "pageY":14, "clientX":53, "clientY":14 }], "changedTouches":[{ "identifier":0, "pageX":53, "pageY":14, "clientX":53, "clientY":14 }] } 看到这么一堆东西大家可能有点晕，没事，我们来捋一捋。这个event想来大家应该明白是什么，event包含了目标对象的相关信息。那意味着，我们只要去修改目标对象的相关信息，就可以给tapName方法传输参数了。 那么如何修改目标对象的相关信息呢？在这之前我们必须要先了解下currentTarget和target两个属性，前者是绑定事件的组件，后者是触发事件的组件源。理解清楚这两个属性很重要！如果是上面例子这种情况，只有一个view组件，那么这两个属性的值没什么区别，但是如果换成下面的这个例子，就不一样了： <view id="tap1" data-hi="绑定组件" bindtap="tapName"> <view id="tap2" data-hi="触发组件源"></view> </view> 我们再输出看看（为了方便对比，只保留下currentTarget和target两个属性）: { "target": { "id": "tap2", "dataset": { "hi":"触发组件源" } }, "currentTarget": { "id": "tap1", "dataset": { "hi":"绑定组件" } } } 通过这个例子就可以很清楚的发现，currentTarget对应的就是外层绑定了tapName方法的view组件，而target对应的则是内部的view组件。 通过两个例子，相信大家也注意到了两个属性，data-hi和dataset，这两个属性有什么关系呢？大家应该猜到了，dataset的值其实就是我们设置的data-xxx的值，而xxx则是dataset里面的key。大家对于data-xxx的写法应该不陌生，就是html中常见的自定义属性的写法，而在小程序中，则被用来传参。 4 改变样式 前面就提到了小程序并不提供获取和 *** 作dom的能力，这就又带来了一个问题，我们如何去动态的改变样式呢？我们先看下例子： <view class="container" style="overflow: {{screenType'hidden':'scroll-y'}}" bindtap="bindType"> Page({ data: { screenType: '' }, bindType: function(){ thissetData({ screenType: '1' }) } })</view> 大家是不是有点明白了呢，我们没有办法直接获取dom然后去改变他的样式，所以我们只能通过data里的属性来控制样式的变化，如上面的代码，overflow的值取决于screenType的值是否存在，如果存在，则overflow: hidden，反之overflow: scroll-y；那么我们只需要改变screenType的值。要改变screenType的值也简单了，小程序提供了thissetData方法，可以设置data内的值。 四、其它 最后提一下我们熟悉的ajax请求，在小程序里，它不叫ajax，而叫做wxrequest。用法和ajax没什么区别，唯一需要特别注意的是，请求必须是>

微信小程序设置子母导航步骤如下1、页面主要是围绕scroll-view来实现大体功能。在wxml定义scroll-view标签，设置允许纵向滚动，同时设置页面高度为获取屏幕高度且不允许下拉刷新，这样用户所有的 *** 作都会在我们所定义的区域内完成。1，在Appjs中获取屏幕高度2、在js文件中定义数据源，也可以通过接口的方式返回，来绘制A-Z的字母列表。在js文件onLoad事件中通过遍历，得到一个26位首字母的数组，并将其在页面进行渲染显示。32，在页面JS得到一个26位字母的数3、通过响应触摸响应事件的监听回调，获取到首字母。在wxml中给渲染字母的容器增加bindtouchstart、bindtouchend、catchtouchmove等事件，可以的话可以再加上一个选择悬浮显示，让界面更加友好及便利。4、将监听回调获取到的首字母进行匹配渲染与scrollview结合起来。

可以通过上传两个，一个是可以定制的T恤/背包等背景图，一个是定制的logo。让用户可以可以拖动logo放置在背景图上粗略实现DIY的预览效果。具体要求：可手势放大/缩小，可面板 *** 作切换，可面板 *** 作放大缩小对应的，可本地选择。

原生容器组件的 movable-area | 微信开放文档 (qqcom) 已经内部实现了拖动和放大缩小，我们只需要理顺组件交互的思路以及注意事项，主要有以下：

1movable-view必须为movable-area的子级元素。

2两个movable-view不能同时设为可手势放大/缩小，存在冲突，因此需要在点击/拖动，还有点击下方tab切换背景图/logo时控制相应的movable-view是否可手势缩放。

3点击或拖动logo/背景时候，与下方的 *** 作面板的tab元素互动，因此需要监听touchstart事件。

4点击/拖动logo时候，需要显示边框，在拖动结束的时候边框消失，显得更用户友好，因此需要在touchstart和touchend中做处理。

5手势放大/缩小时，需要同步下方 *** 作面板的放大倍数，因此需要绑定scale的值（movable-view提供）。

6（重点）手势放大缩小事件是一种resize事件，如果每次resize都要更新一次面板计步器的话是十分浪费资源的，因此需要进行函数防抖（debounce），当触发时，如果规定时间间隔：500ms（个人设置的值）内再次触发resize事件，则把时间间隔更新，只有在最后一次resize事件执行后且500ms内没有再次触发resize事件，才进行计步器值的更新，具体防抖的原理和应用可以自行搜索。

1增加保存功能，对完成的进行保存。

2增加旋转功能

在写一个下拉刷新上拉加载功能的时候使用了touch系列事件编写下拉刷新，正常的触发过程应该是：touchstart→touchmove→touchend，但是在安卓手机端，touchend是在下一次触摸的时候才会触发，百度了，原因是

主要是由于200ms超时导致内核不一定会一直处理touchmove事件，一旦超时会将后续所有的事件转交给UI处理，导致touchmove不会一直触发。

为了解决开发者需要，建议开发者在touchstart时调用eventpreventDefault，这样就可以保证内核会一起触发touchmove事件了。

在touchstart中添加了eventpreventDefault()方法的话，页面的点击事件和链接跳转都会失效，所以尝试在touchmove中添加eventpreventDefault()方法，但是又遇到了页面无法滚动的问题，因为eventpreventDefault()方法阻止了页面的滚动事件。解决这个问题就是在添加eventpreventDefault()方法的时候加上判断条件，在特定条件（我这里是在页面顶端下拉的时候）下才阻止默认事件。

做一个款短视频拍摄的微信小程序，看了下微信接口，以为很简单，大致步骤开始拍摄，停止拍摄，保存，就结束了，谁知道做的过程中发现一些问题。

先看下我做的大概样式

开始调用wxstartRecord()事件后，timeoutCallback方法好像并不会随着wxstopRecord()的调用而销毁。具体情况复现流程为，拍摄15s中视频后，停止拍摄，在下次开始拍摄后，时间大于15s，其实是在同一个camera实例触发多次录像事件，会累计多次拍摄的时长，然后触发timeoutCallback事件，而造成后续触发stopRecord失效，导致录像保存失败。

解决方法，如果不是多次拍摄保存为一条视频，那么每次拍摄的时候创建一个新的camera实例

微信小程序录像默认时长是30s，如果录像时长超过会触发timeoutCallback。但是有一种情况在录像时间达到27s～28s，自己触发wxstopRecord()偶尔会保存失败，或者调用无反应。经过多次测试发现，在自己调用wxstopRecord()保存视频的时候，先触发了timeoutCallback，所以要考虑视频保存到本地的时间。

解决方法，如果需要自己手动保存视频，建议安全时间为25s左右。

在小程序做录像功能要有三个授权，第一是摄像头授权，第二是相册授权(保存文件用)，第三是录音授权。

因为抖音的 *** 作习惯，一个按钮两个功能，单击为拍照，长按为拍摄视频。单击拍照因为打开小程序的时候，默认就强制要求开通权限，所以在长按按钮会d出录音授权的系统d窗。

长按按钮开始录像功能，手指松开录像结束，保存文件。但是在长按触发录音授权的系统d窗，我以为会触发touchend或者touchcancel事件，但是测试后发现授权的系统d窗d出后，touchcancel并不会触发，而在关闭系统d窗后会触发touchend。

解决方法，严格控制逻辑中的事件触发时间点和触发方式。

卡，实在是卡，不建议在cover-view中使用css动画

还有其他多少琐碎问题，就靠大家自行发觉了。

以上就是关于uniapp中点击输入框禁止input获取焦点全部的内容，包括:uniapp中点击输入框禁止input获取焦点、微信小程序开发中遇到的坑及解决办法、如何手动调用h5 touchend时间等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！