输入密码来显示div?

时间:2018-04-16 10:39:56

标签: javascript input login passwords

我正在制作一个有趣的网站,我想在其中放入一个小复活节彩蛋,您输入密码以查看网站上的隐藏页面。

我知道如何用html创建一个登录表单,我得到了输入密码的“输入”标签,但我不确定“输出”应该是什么......?我还希望它只在输入正确的文本时显示div或span。

如果我需要用户名和密码才能匹配,那将会很酷,但我不知道它是如何工作的。

3 个答案:

答案 0 :(得分:0)



import 'package:flutter/material.dart';

typedef Widget WidgetAdapter<T>(T t);

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Generic Type Example',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Generic Type Example', widgetAdapter: stats),
    );
  }
}

class MyHomePage<T> extends StatefulWidget {
  MyHomePage({Key key, this.title, this.widgetAdapter}) : super(key: key);

  final String title;
  final WidgetAdapter<T> widgetAdapter;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState<T> extends State<MyHomePage<T>> {
  List<T> data;

  Widget genericItemBuilder(BuildContext context, int index) {
    if (data == null) {
      data = fetchDataPage();
    }

    return widget.widgetAdapter(data[index]);
  }

  List<T> fetchDataPage() {
    List listOfMap = [{"A": "1"}, {"B": "2"}, {"C": "3"}, {"D": "4"}, {"E": "5"}];

    return listOfMap;
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new ListView.builder(
        itemBuilder: genericItemBuilder,
        itemCount: 5,
      ),
    );
  }
}

/// This used to work with Dart 1. Now, for it to work with Dart 2 I have to change it from Map to dynamic.
/// I don't understand why this is.
Widget stats(Map val) {
  return new Text(val.toString());
}
&#13;
function check_password (input_element) {
  
  //get value of input
  var password = input_element.value;
  
  //check value and show/hide the div
  if (password == 'secret')
      document.getElementById ('hidden_div').style.display = 'block';
  else
      document.getElementById ('hidden_div').style.display = 'none';

}
&#13;
&#13;
&#13;

答案 1 :(得分:-1)

嗯,你需要javascript,这只是一个简单的onclicklistener。

例如:

<button onclick="checkHidden()">Login</button>

<script>
function checkHidden()
{
    if(document.getElementById("name").value == "Name" && document.getElementById("pw") == "123")
    {
        window.location.href = "andereSeite.html";
    }
}
</script>

但显然每个人都可以看到用户名&amp;密码。 他们只需要让他们展示来源。 如果你想秘密使用这个,你需要使用PHP :) 表格+ PHP有许多教程。

答案 2 :(得分:-1)

嗯,这是一个简单的例子。使用onkeyup=""属性在每个输入的字符后运行javascript函数check_password(this)(这指的是输入标记)。如果密码正确,则div将显示display: block/none;

function check_password (input_element) {
  
  //get value of input
  var password = input_element.value;
  
  //check value and show/hide the div
  if (password == 'secret')
      document.getElementById ('hidden_div').style.display = 'block';
  else
      document.getElementById ('hidden_div').style.display = 'none';

}
Enter 'secret' to see the div.
<br>
<input type="text" onkeyup="check_password (this);">
<br>
<div id="hidden_div" style="display: none;">I was hidden until the right password was entered.</div>