Input标签实现回车换行

最新推荐文章于 2025-05-13 10:47:09 发布

原创最新推荐文章于 2025-05-13 10:47:09 发布 · 1.3w 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#回车换行

jquery 同时被 2 个专栏收录

14 篇文章

订阅专栏

bootstrap

1 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的输入框功能，当用户在表单的输入框中按下回车键时，焦点会自动跳转到下一个输入框。此外，还介绍了如何预先设置输入框中value的选中状态，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

input标签实现回车换行

PS:重要的是后面的那串jquery代码，on()事件绑定的方法和选择器的应用
效果如下：
回车换行
head部分

<script src="lib/jquery/jquery-3.4.1.min.js"></script>
	<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
	<style>
	.wrap {
		padding: 20px;
		width: 450px;
		height: 400px;
		margin: 100px auto;
		border: 1px solid #eee;
		box-shadow: 0px 0px 5px #ccc;
		border-radius: 10px;
	}
	p {
		font-size: 25px;
		line-height: 50px;
		font-weight: 700;
	}
</style>

body部分

<div class="wrap">
		<p class="text-center">登录</p>
		<form action="#" class="form-horizontal">
			<div class="form-group">
				<label for="inp1" class="col-md-2 control-label">姓名：</label>
				<div class="col-md-10">
					<input type="text" class="form-control" id="inp1" value="请输入您的姓名">
				</div>
			</div>
			<div class="form-group">
				<label for="inp2" class="col-md-2 control-label">手机：</label>
				<div class="col-md-10">
					<input type="text" class="form-control" id="inp2" value="请输入您的手机号">
				</div>
			</div>
			<div class="form-group">
				<label for="inp3" class="col-md-2 control-label">爱好：</label>
				<div class="col-md-10">
					<input type="text" class="form-control" id="inp3" value="请输入您的爱好">
				</div>
			</div>
			<div class="form-group">
				<label for="inp4" class="col-md-2 control-label">标签：</label>
				<div class="col-md-10">
					<input type="text" class="form-control" id="inp4" value="请输入您的标签">
				</div>
			</div>
		</form>
	</div>
	<script>
		$(function(){
			$("input").on("keyup",function(e){
				if(e.keyCode===13){
					// 获取下一个input节点
					$(this).parent("div").parent("div").next().children().eq(1).children().focus();
				}
			});
			//扩展：提前设置input中value的选中状态
			$("input").on("mouseenter",function(e){
				$(this).select();
			});
		});
	</script>