diff --git a/src/components/TextareaTag/TextareaTag.tsx b/src/components/TextareaTag/TextareaTag.tsx index 96c2343..97899c6 100644 --- a/src/components/TextareaTag/TextareaTag.tsx +++ b/src/components/TextareaTag/TextareaTag.tsx @@ -13,6 +13,8 @@ interface TextareaTagProps { placeholder?: string maxLength?: number options?: { label: string; value: any }[] | null + onFocus?: () => void + onBlur?: () => void } const TextareaTag: React.FC = ({ @@ -20,7 +22,9 @@ const TextareaTag: React.FC = ({ onChange, placeholder = '请输入', maxLength = 1000, - options = [] + options = [], + onFocus, + onBlur }) => { // 处理文本输入变化 const handleTextChange = useCallback((e: any) => { @@ -69,6 +73,8 @@ const TextareaTag: React.FC = ({ onInput={handleTextChange} maxlength={maxLength} autoHeight={false} + onFocus={onFocus} + onBlur={onBlur} /> diff --git a/src/components/TitleTextarea/TitleTextarea.tsx b/src/components/TitleTextarea/TitleTextarea.tsx index f13c6c5..3b2933d 100644 --- a/src/components/TitleTextarea/TitleTextarea.tsx +++ b/src/components/TitleTextarea/TitleTextarea.tsx @@ -8,13 +8,17 @@ interface TitleTextareaProps { onChange: (value: string) => void maxLength?: number placeholder?: string + onFocus?: () => void + onBlur?: () => void } const TitleTextarea: React.FC = ({ value='', onChange, maxLength = 20, - placeholder = '好的标题更吸引人哦' + placeholder = '好的标题更吸引人哦', + onFocus, + onBlur }) => { return ( @@ -26,6 +30,8 @@ const TitleTextarea: React.FC = ({ maxlength={maxLength} autoSize={true} placeholderClass='title-input-placeholder' + onFocus={onFocus} + onBlur={onBlur} /> {value.length}/{maxLength} diff --git a/src/publish_pages/publishBall/index.module.scss b/src/publish_pages/publishBall/index.module.scss index 2ac832d..e92bd08 100644 --- a/src/publish_pages/publishBall/index.module.scss +++ b/src/publish_pages/publishBall/index.module.scss @@ -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; } \ No newline at end of file diff --git a/src/publish_pages/publishBall/index.tsx b/src/publish_pages/publishBall/index.tsx index 669a21c..6a14ba6 100644 --- a/src/publish_pages/publishBall/index.tsx +++ b/src/publish_pages/publishBall/index.tsx @@ -75,7 +75,8 @@ const PublishBall: React.FC = () => { const [formData, setFormData] = useState([defaultFormData]) const [checked, setChecked] = useState(true) const [titleBar, setTitleBar] = useState('发布') - const scrollViewRef = useRef(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 ( - + {/* 活动类型切换 */} @@ -636,6 +645,8 @@ useEffect(() => { formData={item} onChange={(key, value) => updateFormData(key, value, index)} optionsConfig={optionsConfig} + onAnyInputFocus={handleAnyInputFocus} + onAnyInputBlur={handleAnyInputBlur} /> )) diff --git a/src/publish_pages/publishBall/publishForm.tsx b/src/publish_pages/publishBall/publishForm.tsx index becc95e..5845290 100644 --- a/src/publish_pages/publishBall/publishForm.tsx +++ b/src/publish_pages/publishBall/publishForm.tsx @@ -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([]) // 字典数据相关 @@ -214,13 +217,23 @@ const PublishForm: React.FC<{ } - { + const shouldAttachFocus = [FieldType.TEXT, FieldType.TEXTAREATAG].includes(item.type) + const focusProps = shouldAttachFocus ? { + onFocus: (e) => onAnyInputFocus?.(item, e), + onBlur: (e) => onAnyInputBlur?.(item, e) + } : {} + return ( + updateFormData(item.prop as keyof PublishBallFormData, value)} {...optionProps} placeholder={item.placeholder} - /> + {...(focusProps as any)} + /> + ) + })()} )