useKeyboard

获取键盘高度和操作键盘，或获取选取

何时使用

需要操作键盘相关内容

API

const { height, close, getRange } = useKeyboard();

参数说明

无

返回值说明

参数	类型	说明
height	number	键盘高度
close	PromiseWithoutOptionAction<TaroGeneral.CallbackResult>	关闭键盘
getRange	PromiseWithoutOptionAction<TaroGeneral.CallbackResult>	获取选择文本的范围

代码演示

React

device/useKeyboard/index

import { useKeyboard, useModal } from 'taro-hooks';
import DemoContent from '@src/components/DemoContent';
import { Button, Cell } from '@taroify/core';

export default () => {
  const { height, close, getRange } = useKeyboard();
  const show = useModal({ mask: true, title: '获取结果', showCancel: false });

  const handleClose = async () => {
    let content = '关闭成功';
    try {
      const result = await close();
      console.log(result);
    } catch (e) {
      content = e.errMsg || e.message;
    }
    show({ content });
  };

  const handleGetRange = async () => {
    let content = '获取成功';
    try {
      const result = await getRange();
      console.log(result);
    } catch (e) {
      content = e.errMsg || e.message;
    }
    show({ content });
  };

  return (
    <DemoContent>
      <Cell>高度: {height}</Cell>
      <Button
        block
        color="primary"
        className="gap"
        onClick={handleClose}
        shape="square"
      >
        关闭键盘
      </Button>
      <Button
        block
        color="primary"
        className="gap"
        onClick={handleGetRange}
        shape="square"
      >
        获取选择范围
      </Button>
    </DemoContent>
  );
};

Vue

device/useKeyboard/index

<template>
  <demo-content>
    <nut-cell title="高度" :sub-title="$filters.stringify(height)"> </nut-cell>
    <nut-button
      shape="square"
      type="primary"
      class="gap"
      block
      @click="handleClose()"
      >关闭键盘</nut-button
    >
    <nut-button
      shape="square"
      type="primary"
      class="gap"
      block
      @click="handleGetRange()"
      >获取选择范围</nut-button
    >
  </demo-content>
</template>

<script setup lang="ts">
import { useKeyboard, useModal } from 'taro-hooks';
const { height, close, getRange } = useKeyboard();
const show = useModal({ mask: true, title: '获取结果', showCancel: false });

const handleClose = async () => {
  let content = '关闭成功';
  try {
    const result = await close();
    console.log(result);
  } catch (e) {
    content = e.errMsg || e.message;
  }
  show({ content });
};

const handleGetRange = async () => {
  let content = '获取成功';
  try {
    const result = await getRange();
    console.log(result);
  } catch (e) {
    content = e.errMsg || e.message;
  }
  show({ content });
};
</script>

Hook 支持度

微信小程序	H5	ReactNative
✔️		✔️