forked from 77media/video-flow
优化chatbox光标聚焦问题
This commit is contained in:
parent
a4a41da618
commit
e2567c4d1c
@ -91,6 +91,22 @@ export function InputBar({ onSend, setVideoPreview, initialVideoUrl, initialVide
|
|||||||
debouncedAdjustHeight();
|
debouncedAdjustHeight();
|
||||||
}, [text, debouncedAdjustHeight]);
|
}, [text, debouncedAdjustHeight]);
|
||||||
|
|
||||||
|
// 布局切换时保持输入框焦点并将光标移到末尾
|
||||||
|
useEffect(() => {
|
||||||
|
// 等待布局动画完成后再聚焦,避免动画过程中的视觉跳动
|
||||||
|
const focusTimeout = setTimeout(() => {
|
||||||
|
const textarea = textareaRef.current;
|
||||||
|
if (textarea) {
|
||||||
|
textarea.focus();
|
||||||
|
// 将光标移动到文本末尾
|
||||||
|
const length = textarea.value.length;
|
||||||
|
textarea.setSelectionRange(length, length);
|
||||||
|
}
|
||||||
|
}, 200); // 与布局动画时长保持一致
|
||||||
|
|
||||||
|
return () => clearTimeout(focusTimeout);
|
||||||
|
}, [isMultiline]);
|
||||||
|
|
||||||
const handleSend = () => {
|
const handleSend = () => {
|
||||||
const blocks: MessageBlock[] = [];
|
const blocks: MessageBlock[] = [];
|
||||||
if (text.trim()) blocks.push({ type: "text" as const, text: text.trim() });
|
if (text.trim()) blocks.push({ type: "text" as const, text: text.trim() });
|
||||||
@ -247,11 +263,11 @@ export function InputBar({ onSend, setVideoPreview, initialVideoUrl, initialVide
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{/* 文本输入 */}
|
{/* 文本输入 */}
|
||||||
<motion.div layout className="flex-1">
|
<motion.div layout className="flex-1 flex">
|
||||||
<textarea
|
<textarea
|
||||||
ref={textareaRef}
|
ref={textareaRef}
|
||||||
placeholder="输入文字…"
|
placeholder="输入文字…"
|
||||||
className="w-full pl-[10px] pr-[10px] py-[1rem] rounded-[10px] leading-[20px] text-sm border-none bg-transparent text-white placeholder:text-white/[0.40] focus:outline-none resize-none min-h-[48px] max-h-[120px] overflow-y-auto"
|
className="w-full pl-2 pr-2 py-4 rounded-2 leading-4 text-sm border-none bg-transparent text-white placeholder:text-white/[0.40] focus:outline-none resize-none min-h-[48px] max-h-[120px] overflow-y-auto"
|
||||||
rows={1}
|
rows={1}
|
||||||
value={text}
|
value={text}
|
||||||
onChange={(e) => setText(e.target.value)}
|
onChange={(e) => setText(e.target.value)}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user