Question

这是我第一次询问Stack Overflow上的问题，请原谅我，如果我弄乱了格式化。我试图用class = accessGranted CSS替换输入密码框。当用户键入输入框并按Enter键时，应使用CSS替换输入框.accessGranted。

它应该用绿色字母中的ACCESS GRANTED替换输入密码框。此外，我无法弄清楚如何摆脱自动显示在页面上的ACCESS GRANTED。 JSFiddle链接将向您展示我在说什么。

HTML：

     <body>

       <input class="passwordPress" type="password" />
       <div class="accessGranted"></div>

     </body>

CSS：

    .accessGranted:before {
        font-size: 20px;
        color: #4eff73;
        font: sans serif;
        margin-top: 200px;
        margin-left: 200px;
        display: block;
        content: "ACCESS GRANTED";
     }







    body {
      background-color: #000;
    }

   .passwordPress {
      margin-top: 200px;
      margin-left: 200px;

    }

JQuery的：

   $('.passwordPress').bind("enterKey",function(e){
          alert("Enter");
                });
         $('.passwordPress').keypress(function(e){
         if(e.keyCode == 13)
           {
        $(this).replaceWith('<div class="accessGranted"></div>');
      }
     });

以下是JSFiddle的链接：http://jsfiddle.net/x7HVQ/606/

Answer 1

更改了一些HTML以删除不需要的文本。

我更改了jquery函数以使用e.which（我认为更好的浏览器支持）

e.which==13

http://jsfiddle.net/emj6L/

Answer 2

如何摆脱自动显示的ACCESS GRANTED 页面：

只需删除<div>正文中的html

即可

<body>

<input class="passwordPress" type="password" />
<!--<div class="accessGranted"></div> -->

</body>

JSFiddle

如何用填充了CSS的<div>替换<input text =“”box =“”/>？</div>

2 个答案: