去掉标题键盘上移

This commit is contained in:
筱野
2025-10-10 21:57:09 +08:00
parent 687f685e28
commit 1140adf33e
5 changed files with 47 additions and 11 deletions

View File

@@ -13,6 +13,8 @@ interface TextareaTagProps {
placeholder?: string
maxLength?: number
options?: { label: string; value: any }[] | null
onFocus?: () => void
onBlur?: () => void
}
const TextareaTag: React.FC<TextareaTagProps> = ({
@@ -20,7 +22,9 @@ const TextareaTag: React.FC<TextareaTagProps> = ({
onChange,
placeholder = '请输入',
maxLength = 1000,
options = []
options = [],
onFocus,
onBlur
}) => {
// 处理文本输入变化
const handleTextChange = useCallback((e: any) => {
@@ -69,6 +73,8 @@ const TextareaTag: React.FC<TextareaTagProps> = ({
onInput={handleTextChange}
maxlength={maxLength}
autoHeight={false}
onFocus={onFocus}
onBlur={onBlur}
/>
</View>

View File

@@ -8,13 +8,17 @@ interface TitleTextareaProps {
onChange: (value: string) => void
maxLength?: number
placeholder?: string
onFocus?: () => void
onBlur?: () => void
}
const TitleTextarea: React.FC<TitleTextareaProps> = ({
value='',
onChange,
maxLength = 20,
placeholder = '好的标题更吸引人哦'
placeholder = '好的标题更吸引人哦',
onFocus,
onBlur
}) => {
return (
<View className='title-input-wrapper'>
@@ -26,6 +30,8 @@ const TitleTextarea: React.FC<TitleTextareaProps> = ({
maxlength={maxLength}
autoSize={true}
placeholderClass='title-input-placeholder'
onFocus={onFocus}
onBlur={onBlur}
/>
<View className='char-count'>{value.length}/{maxLength}</View>
</View>

View File

@@ -269,7 +269,7 @@
position: fixed !important;
top: 0 !important;
left: 0 !important;
z-index: 9999 !important;
z-index: 99 !important;
width: 100% !important;
box-shadow: none!important;
}

View File

@@ -75,7 +75,8 @@ const PublishBall: React.FC = () => {
const [formData, setFormData] = useState<PublishBallFormData[]>([defaultFormData])
const [checked, setChecked] = useState(true)
const [titleBar, setTitleBar] = useState('发布')
const scrollViewRef = useRef<any>(null)
// 控制是否响应全局键盘(由具体输入框 focus/blur 控制)
const [shouldReactToKeyboard, setShouldReactToKeyboard] = useState(false)
// 删除确认弹窗状态
const [deleteConfirm, setDeleteConfirm] = useState<{
@@ -580,7 +581,7 @@ useEffect(() => {
// 添加本地监听器
const removeListener = addListener((height, visible) => {
console.log('PublishBall 收到键盘变化:', height, visible)
// 这里只记录或用于其他逻辑,布局是否响应交由 shouldReactToKeyboard 决定
})
return () => {
@@ -588,10 +589,18 @@ useEffect(() => {
}
}, [initializeKeyboardListener, addListener])
console.log(isKeyboardVisible, 'isKeyboardVisible');
console.log(keyboardHeight, 'keyboardHeight');
const handleAnyInputFocus = (item: FormFieldConfig, e: any) => {
const { prop } = item
if (prop === 'title') {
return
}
setShouldReactToKeyboard(true)
}
const handleAnyInputBlur = (item: FormFieldConfig, e: any) => {
setShouldReactToKeyboard(false)
}
return (
<View className={`${styles['publish-ball-container']} ${isKeyboardVisible ? styles['publish-ball-container-keyboard'] : ''}`} style={{ bottom: isKeyboardVisible ? `${keyboardHeight - 124}px` : 0 }}>
<View className={`${styles['publish-ball-container']} ${isKeyboardVisible && shouldReactToKeyboard ? styles['publish-ball-container-keyboard'] : ''}`} style={{ bottom: isKeyboardVisible && shouldReactToKeyboard ? `${keyboardHeight - 124}px` : 0 }}>
<GeneralNavbar title={titleBar} backgroundColor="#FAFAFA" className={styles['publish-ball-navbar']} />
<View className={styles['publish-ball']} style={{ paddingTop: `${statusNavbarHeightInfo.totalHeight}px` }}>
{/* 活动类型切换 */}
@@ -636,6 +645,8 @@ useEffect(() => {
formData={item}
onChange={(key, value) => updateFormData(key, value, index)}
optionsConfig={optionsConfig}
onAnyInputFocus={handleAnyInputFocus}
onAnyInputBlur={handleAnyInputBlur}
/>
</View>
))

View File

@@ -25,7 +25,10 @@ const componentMap = {
const PublishForm: React.FC<{
formData: PublishBallFormData,
onChange: (key: keyof PublishBallFormData, value: any, index?: number) => void,
optionsConfig: FormFieldConfig[] }> = ({ formData, onChange, optionsConfig }) => {
optionsConfig: FormFieldConfig[],
onAnyInputFocus?: (item: FormFieldConfig, e: any) => void,
onAnyInputBlur?: (item: FormFieldConfig, e: any) => void,
}> = ({ formData, onChange, optionsConfig, onAnyInputFocus, onAnyInputBlur }) => {
const [coverImages, setCoverImages] = useState<CoverImage[]>([])
// 字典数据相关
@@ -214,13 +217,23 @@ const PublishForm: React.FC<{
</View>
}
<View className={styles['bg-section']}>
<Component
{(() => {
const shouldAttachFocus = [FieldType.TEXT, FieldType.TEXTAREATAG].includes(item.type)
const focusProps = shouldAttachFocus ? {
onFocus: (e) => onAnyInputFocus?.(item, e),
onBlur: (e) => onAnyInputBlur?.(item, e)
} : {}
return (
<Component
label={item.label}
value={formData[item.prop]}
onChange={(value) => updateFormData(item.prop as keyof PublishBallFormData, value)}
{...optionProps}
placeholder={item.placeholder}
/>
{...(focusProps as any)}
/>
)
})()}
</View>
</View>
)