如何在按下键或单击时隐藏和显示Javascript/jQuery中的元素？

我试图隐藏和显示一个带有keydown事件的输入框，但如果在输入框外单击，我想不出如何执行相同的操作

HTML:

使用下面的编码

var visitorInput = document.getElementById("visitorInput");

$('#visitorInput').focus();

    $('#visitorInput').keydown(function( event ){
        if(event.which == 13){
                $("#greet").show();
                console.log('Visitor name is: ' + visitorInput.value);
                //alert('Visitor name is: ' + visitorInput.value);
                $("#visitorInput").hide();

        };

    });

$('#greet, h1').click(function(){
                            $('#visitorInput').show().focus();
                            $('#greet').hide();
      });

---

在keydown事件编码之外应用click事件

您在一条评论中说，keydown可以按照您的要求工作，因此我只对代码进行了一点简化，并保留了一些功能，尽管对我来说，这似乎是一个奇怪的用户体验，所以我假设还有更多内容，您不在这里展示

关于在用户点击时使输入消失，您需要

var$visitorInput=$（“#visitorInput”）.focus（）；
$visitorInput.keydown（函数（事件）{
if（event.which==13）{
var$greet=$（“#greet”）.show（）；
log（'访问者名称为：'+visitorInput.value）；
$visitorInput.hide（）；
$（“#greet，h1”）。单击（函数（）{
$visitorInput.show（）.focus（）；
$greet.hide（）；
});
};
}).blur（函数（事件）{
$visitorInput.hide（）；
});
#问候{
显示：无；
}

你好{{visitorInput}！
很高兴见到你：）
改用jQuery
.toggle（）
。您使用的是angular，那么为什么要使用jQuery绑定Event呢？我从angular获取输入，一旦用户按Enter键，它就会保存输入值。如果用户在输入框外单击，我还想保存输入值。你的意思是在主体上下键吗？在输入框外的任何位置，但一旦用户单击“欢迎”，框应再次显示。这不起作用，下键事件可以，如果用户单击输入框外，我想隐藏输入一旦用户单击“欢迎”，框应再次显示是，但当显示输入框且用户单击框外时，输入应隐藏如果用户单击任何位置，则隐藏输入框，$（body）。单击（函数（）{$（“#visitorInput”）.hide（）；}）；这也是隐藏的问候message@Alrick什么时候隐藏它？什么时候从input@Alrick我想我明白你的意思了。您希望当用户单击问候消息或任意h1标记时，再次显示输入。请查看我的编辑，但现在我在控制台SyntaxError:missing）after参数列表中得到了这个
var visitorInput = document.getElementById("visitorInput");

$('#visitorInput').focus();

    $('#visitorInput').keydown(function( event ){
        if(event.which == 13){
                $("#greet").show();
                console.log('Visitor name is: ' + visitorInput.value);
                //alert('Visitor name is: ' + visitorInput.value);
                $("#visitorInput").hide();
                    $('#greet, h1').click(function(){
                        $('#visitorInput').show().focus();
                        $('#greet').hide();
                    });
        };
    });

var visitorInput = document.getElementById("visitorInput");

$('#visitorInput').focus();

    $('#visitorInput').keydown(function( event ){
        if(event.which == 13){
                $("#greet").show();
                console.log('Visitor name is: ' + visitorInput.value);
                //alert('Visitor name is: ' + visitorInput.value);
                $("#visitorInput").hide();

        };

    });

$('#greet, h1').click(function(){
                            $('#visitorInput').show().focus();
                            $('#greet').hide();
      });