애플릿은 키보드 오버레이 입력 상자를 어떻게 처리합니까(코드 첨부)

이 기사의 내용은 미니 프로그램이 키보드 오버레이 입력 상자(코드 포함)를 처리하는 방법에 대한 것입니다. 이는 특정 참조 값을 가지고 있으므로 도움이 될 수 있습니다.

모바일 단말기에서는 입력창이 페이지 하단에 있을 때 키보드가 입력창을 덮게 되는데, 미니 프로그램에서도 비슷한 상황이 발생하는데, 미니 프로그램에서는 일부 API를 제공하지만 충족할 수 없습니다.

미니 프로그램의 기본 동작

키보드가 입력 상자를 덮으면 아무런 API도 작동하지 않고 미니 프로그램이 입력에 도달할 때까지 화면을 밀어 올립니다.

즉, 처리하지 않으면 미니 프로그램의 키보드가 입력 상자를 덮지 않습니다. 하지만 페이지의 일부가 필요하기 때문에 이것은 내 요구에 충분하지 않습니다. 계속 표시되고 페이지가 위로 올라가는 것을 원하지 않습니다.

그래서 이러한 문제는 미니 프로그램의 API를 통해 해결해야 합니다.

cursor-spacing

비교적 일반적인 UI 디자인에서는 실제로 입력 상자 외부의 래퍼 레이어이며 분명히 작습니다. 프로그램의 기본 동작을 모르기 때문에 결과적으로 이 래퍼 레이어의 아래쪽 부분(입력 상자 아래)이 잘립니다.

이 apicursor 간격을 입력하고 얼마만큼 남겨 둘지 설정하세요. 이 숫자는 입력 상자의 아래쪽 가장자리에서 래퍼 끝까지의 거리여야 합니다.

애플릿의 함정은 문서의 단위가 잘못되었다는 것입니다. 이 속성의 의미가 무엇인지 확인하려면 직접 시도해 보아야 합니다. 따라서 대부분의 사람들은 실수로 인해 단위를 포기하고 올바른 단위는 입니다.

단위가 포함된 문자열. 예를 들어 10px 또는 100rpx.10px或者100rpx.

adjust-position

刚才说到我的需求, 我希望页面不向上推, 而直接把输入框顶上来.

于是尝试了这个api. 默认是true, 把他设为false. 效果变成了: 点了输入框, 键盘完美覆盖输入框.

于是在加上cursor-spacing, 发现这两个api是不能同时生效的.

所以最后结论是: 单纯用提供的api无法实现需求了. 所以只能监听事件自己做.

解决方案

手动操作输入框思路:

1. adjust-position设为false.

2. 在输入框的wrapper的bottom样式绑到本地数据, 并设为absolute定位.

3. 在focus事件里改变输入框的位置.

4. 在blur事件里复原输入框的位置.

按照这个思路操作, 遇到了几个问题:

如何确定输入框的位置

发现在bindfocus事件中可以获得键盘的高度, 经过尝试, 键盘的高度是以px为单位的. 所以直接把bottom的值设为px高度就行了.

如果输入框wrapper的相对定位不是页面底部, 情况就比较复杂, 若是用rpx为单位, 需要获得屏幕宽高来计算px数, 在不麻烦的情况下可以调整布局使wrapper相对于页面底部定位.

在改变style后输入框立即失去焦点

发生了这个情况后表现为: 点了输入框, 输入框的wrapper闪一下又回原处. (因为失去焦点)

经过多次试验, 需要做的是在绑定一个本地变量到focus

adjust-position

방금 내 요구 사항을 언급했는데 페이지에서 그렇지 않기를 바랍니다. 밀어 올리되 입력 상자를 직접 위로 밀어 올리세요.

그래서 이 API를 사용해 보았습니다. 기본값은 true이고, 효과는 다음과 같습니다. 입력 상자를 클릭하면 키보드가 입력 상자를 완벽하게 덮습니다. 커서 간격을 추가하고 이 두 API가 동시에 적용될 수 없다는 것을 발견했습니다. 따라서 최종 결론은 제공된 API를 사용하는 것만으로는 요구 사항을 충족할 수 없다는 것입니다. 따라서 이벤트를 듣고 직접 수행할 수만 있습니다.

🎜🎜 입력 상자 수동 조작 아이디어: 🎜

1. 🎜adjust-position이 false로 설정되었습니다.🎜
2. 🎜아래 스타일을 묶으세요. 입력 상자의 래퍼를 로컬 데이터로 설정하고 절대 위치로 설정합니다.🎜
3. 🎜포커스 이벤트에서 입력 상자의 위치를 ​​변경합니다.🎜
4. 🎜위치를 복원합니다. 🎜

🎜이 아이디어에 따라 몇 가지 문제에 직면했습니다.🎜🎜🎜입력 상자의 위치를 ​​결정하는 방법🎜🎜🎜bindfocus 이벤트에서 발견할 수 있습니다. 시도한 후에는 키보드 높이가 px 단위이므로 하단 값을 px 높이로 설정하세요. 🎜🎜입력 상자 래퍼의 상대적 위치가 페이지 하단에 있지 않으면 상황은 더 복잡해집니다. rpx를 단위로 사용하는 경우 px 수를 계산하려면 화면 너비와 높이를 가져와야 합니다. 문제 없이 래퍼가 페이지 하단을 기준으로 배치되도록 레이아웃을 조정할 수 있습니다. 🎜🎜🎜스타일 변경 후 입력 상자가 즉시 포커스를 잃습니다🎜🎜🎜이 상황은 다음과 같이 나타납니다. 입력 상자를 클릭하면 입력 상자의 래퍼가 깜박이고 원래 위치로 돌아갑니다. 포커스가 손실됨)🎜🎜많은 실험 끝에 수행해야 할 작업은 지역 변수를 focus 속성에 바인딩하는 것입니다.🎜🎜그런 다음 wx:if를 사용하여 포커스 여부에 따라 입력 상자를 숨깁니다. 아니면 가짜 입력 상자를 넣고 클릭 후 키보드를 불러오도록 포커스 속성을 변경하세요.🎜🎜구현 코드: https://github.com/cwj0417/step/blob/master/src/pages/did/index.html vue🎜🎜🎜

위 내용은 애플릿은 키보드 오버레이 입력 상자를 어떻게 처리합니까(코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!