开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >笔记一下,简单的input值的限制

笔记一下,简单的input值的限制

练小习

发布于 2017-12-29 06:10:45

发布于 2017-12-29 06:10:45

1.4K0

举报

文章被收录于专栏：练小习的专栏练小习的专栏

控制文本框里只能输入数字,并且最大数字不超过100,超过一百的话强制显示100

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="X-UA-Compatible" content="IE=7" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>首页</title>

<style type="text/css">

html,body{margin:0; padding:20px;}

</style>

</head>

<body>

<input type="text" id="input" />

<script type="text/javascript">

var text = document.getElementById("input");

text.onkeyup = function(){

this.value=this.value.replace(/D/g,'');

if(text.value>100){

text.value = 100;

}

}

</script>

</body>

</html>

提示：你可以先修改部分代码再运行。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

万字详解高可用架构设计

Go 开发者必备：Protocol Buffers 入门指南

10分钟带你彻底搞懂分布式链路跟踪

多租户的 4 种常用方案

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

60页PPT全解：DeepSeek系列论文技术要点整理

JavaScript事件与例子

事件，就是预先设置好的一段代码，等到用户触发的时候执行。一：常见的事件： 1.关于鼠标的事件　　onclick 鼠标单击触发　　ondblclick 鼠标双击触发　　onmouseover 鼠标移上触发　　onmouseout 鼠标离开触发　　onmousemove 鼠标移动触发 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra

二十三年蝉

2018/02/27

9410

FF下修改美化文件域(input type=file)的样式

该文介绍了如何修改美化文件域（input type=file）在FF下的样式。首先，定义了样式，让文件域看起来更美观。然后，在<form>标签中添加一个input type=file，并设置其class为file。最后，在<style>标签内定义了input的样式。

练小习

2017/12/29

1.2K0

IE7下当position:fixed遇到text-align:center

啥也不说，先看代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>IE7下当position:relative遇到text-align:center</title> <meta

菩提树下的杨过

2018/01/22

6000

CSS布局 -- 左侧定宽，右侧自适应

　　左侧定宽，右侧自适应有很多种方法可以实现缩小窗口试试看？方案一：左边左浮动，右边加个margin-left 查看 demo <!DOCTYPE html PUBLIC "-//W3C/

书童小二

2018/09/03

1.2K0

CSS布局 -- 左侧定宽，右侧自适应

JavaScript对象之document对象

javascript 面向对象编程

DOM对象之document对象 DOM对象：当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被构造为对象的树。打开网页后，首先

二十三年蝉

2018/02/27

1.6K0

JavaScript对象之document对象

PHP全栈学习笔记8

面向对象的基本概念，面向对象编程，oop，面向对象，面向对象的分析，面向对象的设计，面向对象的编程，什么是类。

达达前端

2019/07/03

6770

CSS布局 -- 左右定宽，中间自适应

左右设置绝对定位，定宽，中间设置margin-left margin-right

书童小二

2018/09/03

1.3K0

CSS布局 -- 左右定宽，中间自适应

Jquery插件知识之Jquery.cookie实现页面传值

cookie script 插件 html jquery

张哥编程

2024/12/17

3400

JavaScript面向对象之Windows对象

javascript 面向对象编程

JavaScript之Window对象首先我们先了解一个概念：事件。事件，就是把一段代码设置好，满足条件时触发。或者说，事件是可以被 JavaScript 侦测到的行为。网页中每个元素都可以触发JavaScript事件。我们先来看一个简单的事件： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

二十三年蝉

2018/02/27

1.2K0

JavaScript面向对象之Windows对象

收集两种垂直居中的代码

本文介绍了如何实现浏览器兼容性的几种方法，包括使用CSS hack、使用CSS reset、使用CSS前缀、使用DOCTYPE、使用svg、使用canvas和CSS flex。这些方法可以帮助开发者解决不同浏览器之间的兼容性问题，提高开发效率和用户体验。

练小习

2017/12/29

9340

杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]

https 网络安全 jquery css

下载：https://files.cnblogs.com/files/xiaoxiao5016/font-awesome.min.css 或者官方下载：https://fontawesome.com/download

杨校

2019/06/14

8760

js input file 转base64

base64 file input

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>简单的htm

yaphetsfang

2020/07/30

8.3K0

Flask的集中控制

想通过一个统一的机制，同时允许一些公共的逻辑 {% if args["NoUser"] %} 无用户！ {% else %} <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv

用户1075292

2018/01/23

6700

jQuery学习笔记之概念（1）

jquery ajax javascript html

jQuery学习笔记之概念（1） ——————————————————————学习目录———————————————————— 1.概念 2.特点 3.选择器 4.DOM操作 5.事件 6.jQuery的Ajax ———————————————————————————————————————————————— 前言:当前流行的JavaScript库有： jQuery、MooTools、Prototype、Dojo、YUI、EXT_JS、DWR 1.概念：核心库、UI和插件等。 jQuery是继承prototype之后又一个优秀的JavaScript库。现在jQuery主要包括核心库、UI和插件等。。 jQuery凭借着简介的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM。处理事件执行动画和开发ajax的操作。

王小雷

2019/05/26

2.7K0

className用法

4.className用法例 4.1（keyIEFF.html） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title> </title> <script language="JavaScript" type="text/javascript"> function calc(thistextar, Span) { var len = thistextar.value.length; Span.innerHTML = len + ' 字'; Span.className = 'toredC'; } </script> <style type="text/css">  </style> </head> <body><textarea cols="50" rows="3" onKeyUp="calc(this,document.getElementById('num'))" ></textarea> (<SPAN id=num>字数</SPAN>) </body> </html>

马克java社区

2020/12/02

8540

PHP全栈学习笔记7

图形图像处理技术，gd库的强大支持，PHP的图像可以是PHP的强项，PHP图形化类库，jpgraph是一款非常好用的强大的图形处理工具。

达达前端

2019/07/03

1.5K0

day40_jQuery学习笔记_01

jquery ajax java bootstrap html

day01: jQuery基础 --> 选择器、属性和CSS、文档处理 day02: jQuery高级 --> 筛选、事件、效果(动画)、ajax

黑泽君

2018/10/11

6.9K0

CSS样式表的样式主要可以分为大小，背景，字体，对齐方式，边界边框，列表方块，格式布局等。元素的大小： #div1{ width:300px; height:1000px; } width:宽度，单位可以使用百分比或者像素 height：高度，单位可以使用百分比或者像素如果没有内容且不设置高度和宽度在页面是看不到。背景： #div1{ width:300px; height:1000px;

二十三年蝉

2018/02/27

1.8K0

关于Google Chrome的hack的具体用法

本文介绍了一个针对Google Chrome的专用hack，并给出了具体的例子。该hack通过修改部分代码实现，可以使Google Chrome在特定条件下将指定内容显示为红色。

练小习

2017/12/29

1.1K0

分享几种JS烟花

今天看到蓝色理想有几个哥们都发了自己写的烟花效果，弄的心里痒痒，自己也想写一个出来玩，结果把IE写死好几次，还是放弃了，这里转几个别人写的效果上来分享 <!DOCTYPE html PUBLIC "-

练小习

2017/12/29

2.8K0

相关推荐

JavaScript事件与例子

更多 >