feat：模具台账-输入框优化

6 days ago · 6a53200ff3
parent a955989558
commit 6a53200ff3
5 changed files with 347 additions and 4 deletions
--- a/src/pages_function/pages/moldLedger/index.vue
+++ b/src/pages_function/pages/moldLedger/index.vue
@ -5,6 +5,7 @@
    <view class="filter-bar">
      <view class="keyword-box">
        <input
+          id="mold-ledger-keyword-input"
          v-model="searchKeyword"
          class="keyword-input"
          type="text"
@ -90,12 +91,14 @@
        </scroll-view>
      </view>
    </uni-popup>
+
+    <sv-focus-no-keyboard ref="focusNoKeyboardRef"></sv-focus-no-keyboard>
  </view>
 </template>

 <script setup>
 import { ref, computed, nextTick } from 'vue'
-import { onLoad, onShow } from '@dcloudio/uni-app'
+import { onLoad, onReady } from '@dcloudio/uni-app'
 import { useI18n } from 'vue-i18n'
 import NavBar from '@/components/common/NavBar.vue'
 import CopyButton from '@/components/common/CopyButton.vue'
@ -116,6 +119,8 @@ const selectedStatus = ref(undefined)
 const scrollTop = ref(0)
 const showGoTop = ref(false)
 const keywordFocus = ref(false)
+const focusNoKeyboardRef = ref(null)
+const keywordInputSelector = '#mold-ledger-keyword-input input, input#mold-ledger-keyword-input'

 const statusOptions = computed(() => {
  const options = []
@ -134,13 +139,12 @@ const selectedStatusLabel = computed(() => {
 })

 onLoad(async () => {
-  activateKeywordFocus()
  await initAllDict()
  await fetchList(true)
 })

-onShow(() => {
-  activateKeywordFocus()
+onReady(() => {
+  focusKeywordNoKeyboard()
 })

 function activateKeywordFocus() {
@ -150,6 +154,14 @@ function activateKeywordFocus() {
  })
 }

+function focusKeywordNoKeyboard() {
+  nextTick(() => {
+    setTimeout(() => {
+      focusNoKeyboardRef.value?.focus(keywordInputSelector)
+    }, 80)
+  })
+}
+
 async function handleSearch() {
  await fetchList(true)
 }
--- a/src/uni_modules/sv-focus-no-keyboard/changelog.md
+++ b/src/uni_modules/sv-focus-no-keyboard/changelog.md
@ -0,0 +1,9 @@
+## 1.0.2（2025-08-29）
+1. 更新示例工程
+## 1.0.1（2025-08-29）
+1. 优化兼容性情况
+2. 更新文档
+## 1.0.0（2025-05-26）
+1. 正式版发布
+2. 示例工程发布
+3. 文档发布
--- a/src/uni_modules/sv-focus-no-keyboard/components/sv-focus-no-keyboard/sv-focus-no-keyboard.vue
+++ b/src/uni_modules/sv-focus-no-keyboard/components/sv-focus-no-keyboard/sv-focus-no-keyboard.vue
@ -0,0 +1,100 @@
+<template>
+  <text
+    :ban="banSelector"
+    :change:ban="focusNoKeyboard.watchBan"
+    :focus="focusSelector"
+    :change:focus="focusNoKeyboard.watchFocus"
+  ></text>
+</template>
+
+<script>
+export default {
+  props: {
+    // 禁止软键盘弹出的输入框选择器
+    banSelector: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      focusSelector: ''
+    }
+  },
+  methods: {
+    focus(selector) {
+      this.focusSelector = selector
+    },
+    resetFocus() {
+      this.focusSelector = ''
+    }
+  }
+}
+</script>
+
+<script module="focusNoKeyboard" lang="renderjs">
+export default {
+  data() {
+    return { }
+  },
+  methods: {
+    watchFocus(newValue, oldValue, ownerInstance, instance) {
+      if (newValue) {
+        this.changeFocus(newValue)
+      }
+    },
+    watchBan(newValue, oldValue, ownerInstance, instance) {
+      if (newValue) {
+        this.changeBan(newValue)
+      }
+    },
+    changeFocus(fSelector) {
+      if (!fSelector) return
+      const el = document.querySelector(fSelector);
+      if (!el) return console.warn(`===== input 未渲染完成，请检查 ${fSelector} 是否有误 =====`)
+
+      this.changeInputMode(el, 'noKeyboard')
+      el.focus()
+      setTimeout(() => {
+        this.changeInputMode(el, 'hasKeyboard')
+      })
+      this.$ownerInstance.callMethod('resetFocus');
+    },
+    changeBan(bSelector) {
+      if (!bSelector) return
+      this.$nextTick(() => {
+        const els = document.querySelectorAll(bSelector);
+        if(els.length > 0) {
+          els.forEach(el => {
+            this.changeInputMode(el, 'noKeyboard')
+          })
+        }
+      })
+    },
+    /**
+     * 通过增加或移出inputmode属性来控制是否允许键盘弹出
+     * @param {String} type hasKeyboard | noKeyboard
+     * @description 要关闭软键盘的话，需要给 inputmode 属性设置 none；如果要打开软键盘的话，需要移除 inputmode 属性
+     * @tutorial https://ask.dcloud.net.cn/article/39915
+     */
+    changeInputMode(el, type) {
+      if (!el) return
+      // 判断是否是苹果
+      const isAppleDev = () => {
+        // 正则匹配时忽略大小写
+        const appleUA = /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)
+        const applePlatform = /(iPhone|iPad|iPod|iOS|Mac)/i.test(navigator.platform)
+        return appleUA && applePlatform
+      }
+      if (type == 'noKeyboard') {
+        el.setAttribute('inputmode', 'none')
+        if (isAppleDev()) el.setAttribute('readonly', 'readonly')
+      }
+      if (type == 'hasKeyboard') {
+        el.removeAttribute('inputmode')
+        if (isAppleDev()) el.removeAttribute('readonly')
+      }
+    },
+  }
+}
+</script>
--- a/src/uni_modules/sv-focus-no-keyboard/package.json
+++ b/src/uni_modules/sv-focus-no-keyboard/package.json
@ -0,0 +1,88 @@
+{
+  "id": "sv-focus-no-keyboard",
+  "displayName": "输入框聚焦且阻止键盘弹出",
+  "version": "1.0.2",
+  "description": "使输入框在聚焦的同时，从根本上阻止软键盘弹出，并非是单纯的隐藏键盘",
+  "keywords": [
+    "聚焦",
+    "键盘",
+    "光标",
+    "focus",
+    "keyboard"
+],
+  "repository": "",
+  "engines": {
+    "HBuilderX": "^3.1.0"
+  },
+  "dcloudext": {
+    "type": "component-vue",
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "插件不采集任何数据",
+      "permissions": "无"
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y",
+        "alipay": "y"
+      },
+      "client": {
+        "Vue": {
+          "vue2": "y",
+          "vue3": "y"
+        },
+        "App": {
+            "app-vue": "y",
+            "app-nvue": "n",
+            "app-uvue": "n",
+            "app-harmony": "u"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "n",
+          "阿里": "n",
+          "百度": "n",
+          "字节跳动": "n",
+          "QQ": "n",
+          "钉钉": "n",
+          "快手": "n",
+          "飞书": "n",
+          "京东": "n"
+        },
+        "快应用": {
+          "华为": "n",
+          "联盟": "n"
+        }
+      }
+    }
+  }
+}
--- a/src/uni_modules/sv-focus-no-keyboard/readme.md
+++ b/src/uni_modules/sv-focus-no-keyboard/readme.md
@ -0,0 +1,134 @@
+# sv-focus-no-keyboard
+
+### 兼容性
+
+✅已兼容，❌未兼容 
+
+| VUE2	|VUE3	| Android(APP/H5)	| iOS(APP/H5)	| 小程序	|
+|:---:	|:---:| :---:						| :---:				| :---:	|
+| ✅ ️	| ✅️	| ✅								| ❌						| ❌			|
+
+- 本插件使用 [renderjs](https://uniapp.dcloud.net.cn/tutorial/renderjs.html#renderjs)
+- nvue，小程序，无法使用 renderjs
+- ios 由于固件限制聚焦必弹出键盘，本插件虽然能用，但本质上是通过设置输入框的 readonly 属性进行控制，会导致光标丢失，并非能像安卓那样完美兼容
+
+### props
+
+| 属性名			| 类型			| 默认值	| 说明																|
+| :---				| :---		| :---	| :---															|
+|	banSelector	|	 String	|				|	禁止软键盘弹出的输入框 选择器，可见示例	|
+
+`被 banSelector 禁止的输入框，将永久不再弹出软键盘，除非通过下列 focus 方法重新主动聚焦`
+
+### event
+
+|  事件名	|  参数						|  说明																						|
+|  :---		| :---						| :---																						|
+|	focus		|	selector: String|	指定 选择器 的输入框聚焦，且禁止软键盘弹出，可见示例	|
+
+`focus 不影响用户手动点击输入框的聚焦行为，即用户仍可手动点击输入框进行聚焦并弹出软键盘`
+
+### 使用示例
+
+```
+<template>
+  <view class="index-page">
+    <!-- 输入框 -->
+    <view>1. 普通组件输入框，聚焦伴随键盘弹出</view>
+    <uni-easyinput placeholder="请输入内容"></uni-easyinput>
+
+    <view style="margin-top: 20px">2. 处理后的组件输入框，主动聚焦后可阻止键盘弹出</view>
+    <uni-easyinput id="fnk-input" placeholder="请输入内容"></uni-easyinput>
+    <button size="mini" @click="focusNoKeyboard('#fnk-input input')">主动聚焦</button>
+
+    <view style="margin-top: 20px">3. 组件输入框，聚焦永久阻止键盘弹出</view>
+    <uni-easyinput id="fnk-always" placeholder="请输入内容"></uni-easyinput>
+
+    <view style="margin-top: 20px; color: red">
+      注意：在vue2下，部分非原生input标签，如uni-easyinput插件由于内部特殊处理，可能无法兼容阻止键盘弹出的问题；
+      但是该问题在vue3下可能不会出现，所以建议使用vue3，或者尽量使用原生input等标签
+    </view>
+
+    <hr style="margin-top: 20px" />
+
+    <view style="margin-top: 20px">4. 普通原生输入框，聚焦伴随键盘弹出</view>
+    <input class="input-native" placeholder="请输入内容" />
+
+    <view style="margin-top: 20px">5. 处理后的原生输入框，主动聚焦后可阻止键盘弹出</view>
+    <input class="input-native" id="fnk-input-native" placeholder="请输入内容" />
+    <button size="mini" @click="focusNoKeyboard('#fnk-input-native input')">
+      主动聚焦
+    </button>
+
+    <view style="margin-top: 20px">6. 原生输入框，聚焦永久阻止键盘弹出</view>
+    <input id="fnk-always-native" class="input-native" placeholder="请输入内容" />
+
+    <hr style="margin-top: 20px" />
+
+    <!-- 文本域 -->
+    <view style="margin-top: 20px">7. 原生文本域，主动聚焦后可阻止键盘弹出</view>
+    <textarea id="textarea-box" placeholder="请输入内容"></textarea>
+    <button size="mini" @click="focusNoKeyboard('#textarea-box textarea')">
+      主动聚焦
+    </button>
+
+    <hr style="margin-top: 20px" />
+
+    <!-- 富文本编辑器 -->
+    <view style="margin-top: 20px">
+      8. 富文本编辑器（无法永久阻止键盘弹出，只推荐主动聚焦后可阻止键盘弹出；
+      但是在聚焦过其他标签之后，重新聚焦回editor，会导致光标初始到开始位置）
+    </view>
+    <editor id="editor-box" placeholder="请输入内容"></editor>
+    <button size="mini" @click="focusNoKeyboard('#editor-box .ql-editor')">
+      主动聚焦
+    </button>
+
+    <hr style="margin-top: 20px" />
+
+    <!-- 注意 -->
+    <view style="margin-top: 20px; color: red">
+      注意：必须指定给到实际可以聚焦的dom盒子，
+      如：实际的input，textarea标签，或者editor组件下的.ql-editor盒子等
+    </view>
+
+    <!-- 使用 uni_modules 插件 -->
+    <sv-focus-no-keyboard
+      banSelector="#fnk-always input, #fnk-always-native input"
+      ref="fnkRef"
+    ></sv-focus-no-keyboard>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  methods: {
+    focusNoKeyboard(focusSelector) {
+      this.$refs.fnkRef.focus(focusSelector)
+    }
+  }
+}
+</script>
+```
+
+### 注意
+
+1. 必须指定给到实际可以聚焦的dom盒子，如：实际的input，textarea标签，或者editor组件下的.ql-editor盒子等
+
+2. 在vue2下，部分非原生input标签，如uni-easyinput插件由于内部特殊处理，可能无法兼容阻止键盘弹出的问题；但是该问题在vue3下可能不会出现，所以建议使用vue3，或者尽量使用原生input等标签
+
+### 结语
+
+本插件免费开源，如若借鉴源码还请注明出处，未经授权禁止转载售卖等侵犯版权行为，谢谢！
+
+感谢您使用本插件，如果在使用过程中遇到任何问题，欢迎在评论区留言或加群讨论，制作不易，还望五星好评 🌟🌟🌟🌟🌟
+
+欢迎进群🍌交流，🐧Q群：
+- ①群：852637893
+- ②群：816646292
+- ③群：704990626
+
+💬WX群可通过🐧Q群进入