JS获取输入的用户名

最新推荐文章于 2024-06-11 15:00:47 发布

Point酱

最新推荐文章于 2024-06-11 15:00:47 发布

阅读量4.4k

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_40571965/article/details/85159197

版权

前端专栏收录该内容

41 篇文章 0 订阅

订阅专栏

代码msg返回的就是用户的名字。这里我设置了个按钮可以查看。目的是为了测试~~

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>login</title>
<!--css部分-->
<style type="text/css">
*{
	margin: 0;
	padding: 0;
}
/*背景css*/
body {
	margin: 0;
	background-image: url('images/登录背景.png');  
	background-repeat:no-repeat ;
	background-size:100% 100%; 
	background-attachment: fixed;" 
}

/*登录框大小*/
#wrap .logGet {
	height: 490px;
	width: 400px;  
	position: fixed;
	background-color: #FFFFFF;
	top: 28%;
	right: 10%;
}
/*按钮的css*/
.logC a button {
	width: 100%;
	height: 45px;
	background-color: #ee7700;
	border: none;
	color: white;
	font-size: 18px;
}
/*登录框上的“登录”的css*/
.logGet .logD.logDtip .p1 {
	display: inline-block;
	font-size: 28px;
	margin-top: 30px;
	width: 86%;
}
/*给“登录”设置下划线，为了美观^^ */
#wrap .logGet .logD.logDtip {
	width: 86%;
	border-bottom: 1px solid #ee7700;
	margin-bottom: 30px;
	margin-top: 0px;
	margin-right: auto;
	margin-left: auto;
}
/*“输入框”的css*/
.logGet .lgD input {
	width: 100%;
	height: 42px;
	text-indent: 2.5rem;
}
/*设置“输入框”插件的间距*/
#wrap .logGet .lgD {
	width: 86%;
	position: relative;
	margin-bottom: 30px;
	margin-top: 30px;
	margin-right: auto;
	margin-left: auto;
}
/*设置“登录按钮”的间距*/
#wrap .logGet .logC {
	width: 86%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
/*设置“设置前往注册页面按钮”*/
#wrap .logGet .logE{
	width: 50%;
	margin-top: 40px;
	font-size: 15px;
	letter-spacing: 5px;
	padding-left: 200px;
  }
</style>
</head>
<!--HTML部分-->
<body>	
<div class="wrap" id="wrap">
	<div class="logGet" id="main">
		<!--测试查看用户名。这个form调用下面的js，如果删掉就无效。-->
		<form id="login" action="/login/" method="post">
			<!-- 头部提示信息 -->
			<div class="logD logDtip">
				<p class="p1">登录</p>
			</div>
			<!-- 用户名 -->
			<div class="lgD">
				<img src="images/登录1.jpg" width="40" height="40" style="float: left;" >
				<div style="float: left;font-size: 25px;" >
					&nbsp&nbsp用户名：
				</div>
				<!--输入处-->
				<label for="username"></label>
            	<input type="text" name="username" />
			</div>
			<!-- 密码 -->
			<div class="lgD">
				<img src="images/登录2.jpg" width="40" height="40" style="float:left;">
				<!--输入处-->
				<div style="float: left; font-size: 25px" >
					&nbsp&nbsp密码：
				</div>
						<!--用于测试。查看输入的用户名-->
						<label for="pwd"></label>
		            	<input  id="pwd" name="pwd" />
						</div>
						<div class="logF">
							<a type="submit"><button>看用户名字</button></a>
						</div>
		</form>
		<!--按钮登录-->
		<div class="logC">
			<a href="跳转.html" onclick="congratulate()"><button>登 录</button></a>
		</div>
			<!--按钮注册页面跳转-->
		<div class="logE">
			<b>还没账号？</b>
			<a href="注册.html">点击注册</a>
		</div>
	</div>
</form>
</div>

</body>
</html>
<!--js部分-->
<script language="javascript"> 
//Helper函数，用于添加事件侦听器
function addEvent (el, event, callback) {
  if ('addEventListener' in el) {                  // 如果 addEventListener 有效
    el.addEventListener(event, callback, false);   // 就用它
  } else {                                       
    el['e' + event + callback] = callback;         
    el[event + callback] = function () {
      el['e' + event + callback](window.event);
    };
    el.attachEvent('on' + event, el[event + callback]);
  }
}

//删除事件侦听器的帮助函数
function removeEvent(el, event, callback) {
  if ('removeEventListener' in el) {                      // 如果removeEventListener有效
    el.removeEventListener(event, callback, false);       // 就用它
  } else {                                                
    el.detachEvent('on' + event, el[event + callback]);   
    el[event + callback] = null;
    el['e' + event + callback] = null;
  }
}
//用于用户刷新页面
function congratulate(){
    setTimeout(function(){location.reload()},200);
}
//主要触发处
(function(){ 
  var form = document.getElementById('login');       // 获取表单元素
  addEvent(form, 'submit', function(e) {             //当用户提交表单时
    e.preventDefault();                              //停止发送
    var elements = this.elements;                    // 获取所有表单元素
    var username = elements.username.value;          // 选择输入的用户名
    var msg  = username;            //储存用户名（msg返回的就是他们输入的用户名）
    alert('登录的用户名是：'+msg); //！！！抛出用户名
  });
}());
</script>

Point酱

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JS获取输入的用户名

代码msg返回的就是用户的名字。这里我设置了个按钮可以查看。目的是为了测试~~&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;login&lt;/title&gt;&lt;!--css部分--&gt;&lt;style
复制链接

扫一扫

专栏目录