JavaScript 实现点击回复或引用时自动聚焦输入框

作者:小圆点

时间:2026-10-26

浏览:98

本文介绍如何使用 JavaScript 在用户点击回复或引用链接时,自动将输入焦点定位到留言输入框。通过调用 document.getElementById('id').focus() 或 document.all.id.focus() 方法,结合 HTML 按钮的 onclick 事件,实现点击后光标自动出现在文本框中,提升用户交互体验。

文章目录

实现点击自动聚焦输入框

在网页的回复或引用功能中,经常需要让用户点击相关按钮后,输入焦点自动出现在留言输入框内。如果仅使用锚点定位页面位置,输入焦点无法被激活,导致用户仍需手动点击输入框才能开始输入。


实现该功能的核心代码如下:

 
javascript:document.getElementById("id").focus();
或者使用以下代码:
javascript:document.all.id.focus();

例子:

具体示例如下:

 
<input type="text" name="tt" id="tt">
<input type="button" name="bt" id="bt" onclick="javascript:document.all.tt.focus();" value="给文本框设焦点">

博客回复与引用功能示例

接下来,以博客回复和引用功能为例,展示如何定位并让焦点出现在文字右侧。


相关代码如下:

 
//引用调用函数
function quote(name,id){
var quoteMsg=document.getElementById(id).innerHTML;
var content=document.getElementById("comment");
quoteMsg=quoteMsg.replace(/<IMG src="http://img.xxxxxxx.com/static/i/i_/g, "^~").replace(/_h.gif">/g, "~^").replace(/<BR>/g,'n');
content.focus();//要让焦点在文字的右边,这行代码要在前面
content.value=quoteMsg+'【引用 ‘+name+'】'+'n'+'——————————————————————'+'n'; //后填入文字
return false; //取消href的作用
} 
//回复自动输入姓名函数
function backcomment(msg){
backdb=document.getElementById(‘comment');
backdb.focus();
backdb.value=msg+'n';
return false;
//return true; 原来用锚来定位
} 

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章