有关input标签做了一些总结

最新推荐文章于 2025-06-09 20:31:44 发布

青春有幸

最新推荐文章于 2025-06-09 20:31:44 发布

阅读量441

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： input标签

本文链接：https://blog.youkuaiyun.com/weixin_40106067/article/details/82011318

HTML 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了前端开发中常用的表单控件技巧，包括如何使用JavaScript实现返回历史页面、重置按钮功能，如何限制输入框的字数并显示提示信息，如何确保输入框只能输入正整数，以及如何在鼠标悬停时使输入框边框变色。

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

1、返回历史上一页

onclick="window.history.go(-1)"

2、重置按钮

onclick="javascript:window.history.back();"

3、输入框字数限制

<input type="text" id="name" maxlength="20" placeholder="最大长度为20"/>
$(document).ready(function(){
     $("input#name").keyup(function(){
	 if ($("input#name").val().length >= 20){
	    parent.$.messager.alert("温馨提示","最多输入20个字符!","info");
	 } 
     });
});

说一下其中的几个属性：

maxlength：输入字段的最大长度；

placeholder：描述输入字段预期值的提示信息；

readonly：只读不可修改，设置了该属性的表单会被提交；

disabled：不可修改，设置了该属性的表单不会被提交。

4、只能输入正整数

onkeyup="value=value.replace(/[^\d]/,'')"
onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/,''))"

5、点击输入框变色

id属性为：name
#name:HOVER{border:1px solid red;}