微信小程序 input使用letter-spacing失效问题

根据ui设计稿,

本来思路是一个input搞定,下面的线使用背景图

background:url(‘/images/line.png‘)no-repeat bottom center;

然后使用letter-spacing,让字体间隔开。

但是遇到了小程序的坑,letter-sapcing在input中没效果。

于是我gitlab上找到一个,模拟光标输入框的源码,并抄袭了作者的思路。(链接如下:https://github.com/evan2020/six-Input-box)

于是我的新思路是这样的:

仍然使用一个input,并设置auto-focus,这样当进入页面的时候,手机端会自动弹出数字键盘。

然后模拟光标的css如下:

.cursor {
  width: 1px;
  height:80rpx;
  background-color: #2AC3A4;
  animation: focus 0.7s infinite;
}

/* 光标动画 */

@keyframes focus {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

1)input设置margin-left:-100%,不显示在页面可视区域中,

2)上面线框位置,使用view标签,仍然使用背景图展示下面的间断线

3)使用bindinput监听input值的变化,并通过numList = [...e.detail.value]将input的值(字符串)转换为数组。并渲染在view中

<view id="searchNum" class="set-number" style="background:url({{line}}) no-repeat bottom center;background-size:100%">
    <view class="set-number-content">
      <view wx:if="{{!numList.length}}" class="cursor"></view>
      <text wx:if="{{numList.length}}">{{numList[0]}}</text>
    </view>
    <view class="set-number-content">
      <view wx:if="{{numList.length===1}}" class="cursor"></view>
      <text wx:if="{{numList.length>=2}}">{{numList[1]}}</text>
    </view>
    <view class="set-number-content">
      <view wx:if="{{numList.length===2}}" class="cursor"></view>
      <text wx:if="{{numList.length>=3}}">{{numList[2]}}</text>
    </view>
    <view class="set-number-content">
      <view wx:if="{{numList.length===3}}" class="cursor"></view>
      <text wx:if="{{numList.length>=4}}">{{numList[3]}}</text>
    </view>
  </view>

大家有更好的思路的,欢迎来赐教

原文地址:https://www.cnblogs.com/HappyYawen/p/8989442.html

时间: 2024-10-04 22:36:18

微信小程序 input使用letter-spacing失效问题的相关文章

微信小程序 input 的 type属性 text、number、idcard、digit 区别

微信小程序的 input 有个属性叫 type,这个 type 有几个可选值: text:不必解释 number:数字键盘(无小数点) idcard:数字键盘(无小数点.有个 X 键) digit:数字键盘(有小数点) 注意:number 是无小数点的,digit 是有小数点的 输入时键盘只能出现相应的数字键盘 转发自:https://blog.csdn.net/yelin042/article/details/72519138 原文地址:https://www.cnblogs.com/firs

第十一篇、微信小程序-input组件

主要属性: 效果图: ml: <!--style的优先级比class高会覆盖和class相同属性--> <!--头像--> <view style="display:flex;justify-content: center;"> <image style="width:130rpx;height:130rpx;border-radius:50%;margin-top:10%;" src="../../image/l

微信小程序input的placeholder的字体会上移或下移

placeholder文字在聚焦是为空,在失焦是显示为指定值 xml <input type="text" class="searchInpt" placeholder="{{searchValue}}}"  bindfocus="focusFn" bindblur="blurFn"/> js Page({ data: { searchValue:"请输入关键词" }, fo

微信小程序获取输入框(input)内容

微信小程序---获取输入框(input)内容 wxml <input placeholder="请输入手机号码" maxlength="11" type="tel" bindinput="getInput" /> js Page({ data:{ getInput: null }, getInput:function(){//方法1 this.data.getInput = e.detail.value; }, /

微信小程序学习指南

作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 微信小程序正式公测, 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教

微信小程序给input、picker、textarea编写统一的更新数据逻辑

wepy开发小程序 以input为例,微信小程序没有数据双向绑定,input要显示绑定的数据即value等于一个绑定的量 <input type="text" value="{{inputdata}}"/> data = { inputdata: '数据' } 当在input中改变内容后,inputdata并不会变化,需要绑定事件,通过编写程序来改变inputdata. 但开发过程中如果input等表单控件很多的话,这些事件一个一个写就会感到很麻烦,所以

微信小程序判断input是否为空

微信小程序中用到input值时候,判断其内容是否为空,可以用if-else判断内容的length,也可以给input加点击事件,判断其内容:以下是我解决问题的过程wxml代码 <view class="name"> <text>姓名</text> <input type='text' placeholder='收货人姓名' value="{{userName}}" bindblur='username'></in

微信小程序开发-地图map组件上使用input组件

微信小程序开发-地图map组件上使用input组件 标签: 微信小程序 uni-app 原生组件层级关系 微信小程序在最高层级 在微信小程序中原生组件包括camera canvas input(仅在focus时表现为原生组件) live-player live-pusher map textarea video 在微信小程序开发中原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上. 后插入的原生组件可以覆盖之前的原生组件. 原生组件还无法在 pic

获取微信小程序的input控件的value

习惯了vue的方式,我以为javascript世界默认是双向绑定的.可...微信小程序除外,虽然显示值还是value={{jsproperty}}.整个文档也没有直接告诉你怎么去获取一个input的录入值,这几乎是所有文档中仅次于"hello world"的说明了. 如何获取呢?大体上两种办法: 一是利用控件本身的事件,不断的刷新data里的某个属性值,常用是bindinput.bindblur.前者是录入时处理,后者是控件失去焦点时处理.如果每个控件都需要一个绑定的方法,这当然是可怕