如何在javascript中单击外部时禁用文本框

每当单击某个特定范围时，我都会显示一个搜索框。这是我的密码

<td style="width:35%;text-align:left;">
<span id='tgName' onclick ='showbox()'>Template Group</span>
<input id='searchBox' type='text'style='display:none' onkeypress ='handleEnterKey(this.id)'> </input>
</td>
<td style="width:30%;text-align:left;">
<span id ='ttName' onclick ='showbox1()'>Template Name </span>
<input id='searchBox1' type='text'style='display:none'onkeypress ='handleEnterKey(this.id)'>
</input>
</td>
function showbox()
{
document.getElementById('tgName').style.display='none';
document.getElementById('searchBox').style.display= '';
}

function showbox1()
{
document.getElementById('ttName').style.display='none';
document.getElementById('searchBox1').style.display= '';
}

模板组
模板名称
函数显示框（）
{
document.getElementById（'tgName'）.style.display='none'；
document.getElementById（'searchBox'）.style.display=''；
}
函数showbox1（）
{
document.getElementById（'ttName'）.style.display='none'；
document.getElementById（'searchBox1'）.style.display=''；
}

我想，如果用户在框外单击，则框消失，跨度出现。如何实现这一目标

document.getElementById('searchBox').disabled = true;

如果您想禁用它而不隐藏它

如果要在不隐藏的情况下禁用它。

使用

文本框的事件
并调用函数
showbox（）


使用
文本框的事件和调用函数
showbox（）

将此脚本添加到您的页面上，您的任务将完成

 <script>
    $(document).ready(function () {

            $(document).mouseup(function (e) {

            var container = $("#searchBox1");

                    if (!container.is(e.target) 
                && container.has(e.target).length === 0) 
                    {

                        document.getElementById("searchBox1").style.display = 'none';

                    }
                });

        });

    </script>


$（文档）.ready（函数（）{
$（文档）.mouseup（函数（e）{
变量容器=$（“#搜索框1”）；
如果（！container.is）（即目标）
&&container.has（e.target）.length==0）
{
document.getElementById（“searchBox1”）.style.display='none'；
}
});
});
将此脚本添加到您的页面上，您的任务将完成

 <script>
    $(document).ready(function () {

            $(document).mouseup(function (e) {

            var container = $("#searchBox1");

                    if (!container.is(e.target) 
                && container.has(e.target).length === 0) 
                    {

                        document.getElementById("searchBox1").style.display = 'none';

                    }
                });

        });

    </script>


$（文档）.ready（函数（）{
$（文档）.mouseup（函数（e）{
变量容器=$（“#搜索框1”）；
如果（！container.is）（即目标）
&&container.has（e.target）.length==0）
{
document.getElementById（“searchBox1”）.style.display='none'；
}
});
});
我想知道我应该将您提供的代码附加到什么事件上？要在单击外部任何位置时禁用方框，我想知道我应该将您提供的代码附加到什么事件？单击外部任意位置时禁用框的步骤