`

JS控制input输入

 
阅读更多
1、小写自动转换成大写:
    <input type="text" name="XianJin" class="input02" style="text-transform:uppercase;">
    or
    <input type="text" name="XianJin" onkeyup="this.value=this.value.toLocaleUpperCase()"> 
2、大写自动转换成小写
    <input type="text" name="XianJin" class="input02" style="text-transform:lowercase;">
    or
    <input type="text" name="XianJin" onkeyup="this.value=this.value.toLocaleLowerCase()"> 
3、防止退后清空的TEXT文档
   <INPUT style=behavior:url(#default#savehistory); type=text id=oPersistInput> 


4、ENTER键可以让光标移到下一个输入框 
<input onkeydown="if(event.keyCode==13)event.keyCode=9" > 
5、只能为中文(有闪动)
<input onkeyup="value=value.replace(/[ -~]/g,'')" onkeydown="if(event.keyCode==13)event.keyCode=9"> 
6、只能为数字(有闪动)
<input onkeyup="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"> 
7、只能为数字(无闪动)
<input style="ime-mode:disabled" onkeydown="if(event.keyCode==13)event.keyCode=9" onKeyPress="if ((event.keyCode<48 || event.keyCode>57)) event.returnValue=false"> 
or 
onkeyup="if(isNaN(value)){alert('必须是数字');value='';}" 
8、只能输入英文和数字(有闪动) 
<input onkeyup="value=value.replace(/[\W]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"> 
9、屏蔽输入法
<input type="text" name="url" style="ime-mode:disabled" onkeydown="if(event.keyCode==13)event.keyCode=9"> 



10、只能输入 数字,小数点,减号(-) 字符(无闪动) 
<input onKeyPress="if (event.keyCode!=46 && event.keyCode!=45 && (event.keyCode<48 || event.keyCode>57)) event.returnValue=false"> 
11、改变输入框字体的大小.按钮字体不变
<input name="startdate" type="text"  style="font-family: Arial; color: #008000;font-size: 27px" size="10"> 
12、最多可以输入255个字符
<textarea name="txt" rows="7" id="txt" onKeyPress="xz()"></textarea> 



<script language="javascript">
function xz()
{
     if (txt.value.length>255)
         event.keyCode=0;
txt.value=txt.value.substr(0,255);
}
</script> 

常用限制input的方法
1.取消按钮按下时的虚线框,在input里添加属性值 hideFocus 或者 HideFocus=true
input type=submit value=提交 hidefocus=true 


2.只读文本框内容,在input里添加属性值 readonly
input type=text readonly 


3.防止退后清空的TEXT文档(可把style内容做做为类引用)
input type=text style=behaviorurl(#default#savehistory); 


4.ENTER键可以让光标移到下一个输入框
input type=text onkeydown=if(event.keyCode==13)event.keyCode=9 
5.只能为中文(有闪动)
input type=text onkeyup=value=value.replace([ -~]g,'') onkeydown=if(event.keyCode==13)event.keyCode=9 


6.只能为数字(有闪动)
input type=text onkeyup=value=value.replace([^d]g,'') onbeforepaste=clipboardData.setData('text',clipboardData.getData('text').replace([^d]g,'')) 



7.只能为数字(无闪动)
input type=text style=ime-modedisabled onkeydown=if(event.keyCode==13)event.keyCode=9 onkeypress=if ((event.keyCode48 event.keyCode57)) event.returnValue=false 



8.只能输入英文和数字(有闪动)
input type=text onkeyup=value=value.replace([W]g,'') onbeforepaste=clipboardData.setData('text',clipboardData.getData('text').replace([^d]g,'')) 


9.屏蔽输入法
input type=text name=url style=ime-modedisabled onkeydown=if(event.keyCode==13)event.keyCode=9 


10. 只能输入 数字,小数点,减号(-) 字符(无闪动)
input onkeypress=if (event.keyCode!=46 && event.keyCode!=45 && (event.keyCode48 event.keyCode57)) event.returnValue=false 
11. 只能输入两位小数,三位小数(有闪动)
input type=text maxlength=9 onkeyup=if(value.match(^d{3}$))value=value.replace(value,parseInt(value10)) ;value=value.replace(.d.g,'.') onkeypress=if((event.keyCode48 event.keyCode57) && event.keyCode!=46 && event.keyCode!=45 value.match(^d{3}$) .d{3}$.test(value)) {event.returnValue=false} 


分享到:
评论

相关推荐

    用JS控制INPUT输入内容

    ### 使用JavaScript控制INPUT输入内容详解 #### 一、概述 在网页开发中,为了提高用户体验并确保数据的有效性,我们经常需要对用户输入的数据进行控制和验证。通过使用JavaScript(简称JS),我们可以轻松地实现这...

    JS控制 input 输入字符限制

    在JavaScript中,对`input`元素的输入进行字符限制是一种常见的前端验证技术,它能确保用户输入的数据符合特定格式或规则,从而提高数据质量和用户体验。本文将深入探讨如何使用JavaScript和正则表达式来实现这一...

    Javascript控制input输入时间格式的方法

    本文将详细介绍如何使用JavaScript来控制input元素中时间格式的输入,...希望以上知识点能帮助大家更好地理解如何使用JavaScript控制input输入时间格式,并且能够灵活应用鼠标事件及正则表达式来实现更丰富的交互效果。

    js各种限制input输入汇总

    ### JS各种限制input输入汇总知识点解析 #### 一、取消按钮按下时的虚线框 在Web开发过程中,用户点击按钮或输入框等元素时,可能会出现边框高亮的效果,这种效果通常是为了提高交互性而设计的。但在某些场景下,...

    JS控制input_输入字符限制

    本文将详细讲解如何使用JavaScript控制`input`输入的字符限制,包括限制输入类型、屏蔽输入法以及禁用编辑等。 1. **键盘事件与按键码**: `keydown`和`keyup`事件常用来监听用户在输入框中的按键操作。例如,通过...

    js实现input限制输入字符(字节)数多出的自动去掉

    js实现input限制输入字符(字节)数多出的自己自动去掉

    javascript方法:input只能输入数字和字母

    javascript 是一种web开发重要工具! 这个方法可以让你实现:input只能输入数字和字母

    JavaScript Input 输入验证

    javaScript Input输入限制集合,直接引用就可以使用,以后会慢慢继承再其中,感谢下载体验

    控制input输入的长度尺寸

    控制 input 输入的长度尺寸 控制 input 输入框的长度尺寸是 HTML 中一个非常重要的知识点。通过控制 input 输入框的长度尺寸,可以美化页面布局,提高用户体验。 1. 用 style 样式控制文本输入框的长度尺寸 可以...

    js控制input输入字符解析

    这篇文章详细介绍了JavaScript中如何控制HTML中的input元素输入字符的多种方法,包括限制用户输入的字符类型、屏蔽输入法、限制输入的数字和小数点等。下面将对这些方法逐一进行说明。 1. 防止光标跳到下一个输入框...

    javascript 控制input只允许输入的各种指定内容.docx

    ### JavaScript 控制 input 只允许输入的指定内容详解 #### 概述 在网页表单设计中,确保用户输入的数据符合预期格式是非常重要的一步。利用 JavaScript 对 input 输入框进行限制,能够有效提升用户体验并减少后端...

    js限制input小数点前几位后几位

    1、可以动态设置小数点的前几位和后几位,进行实时校验;...2、通过正则表达式判断,超过设置的范围就不能输入了; 3、只能输入数字和小数点; 4、已经封装好的插件,可以直接使用。有使用的示例和必要的注释。

    js限制input标签中只能输入中文

    本文主要讨论了如何利用JavaScript(js)来限制HTML页面中的`&lt;input&gt;`标签只能输入中文字符。中文字符在Unicode编码范围大致在`\u4E00`到`\u9FA5`之间。为了实现这一功能,我们需要在输入框中添加相应的事件监听器,...

    INPUT输入限制

    根据提供的文件信息,我们可以归纳出以下关于“INPUT输入限制”的知识点: ### 1. 数字输入限制 在第一个示例中,使用了两种方法来确保用户只能输入数字。 - **第一种方法**:通过 `onkeyup` 和 `onafterpaste` ...

    input框只能输入数字和一个小数点

    限制input框只能输入数字和一个小数点的需求,在实际项目中相当常见。通过合理利用HTML的`&lt;input&gt;`元素类型,结合JavaScript的事件监听和正则表达式,可以有效地实现这一目标。同时,深入理解DOM操作和事件处理机制...

    input只能输入数字英文字母汉字

    根据提供的文件信息,本文将详细解释如何通过JavaScript代码限制HTML中的`&lt;input&gt;`元素只接收数字、英文字符以及汉字输入。这些技术对于确保用户输入的数据符合预期格式非常有用,在多种应用场景下都非常重要。 ###...

    js获取 input file 图片立即显示

    - 图片大小限制:为了防止内存溢出或加载时间过长,可以设置输入类型的`accept`属性限制文件类型和大小。 - 响应式设计:确保预览图片的尺寸适应不同设备和屏幕分辨率。 - 图片压缩:如果用户上传大尺寸图片,...

    input,验证,闪动,自动删除,限制输入

    JavaScript 验证功能:限制用户输入 #### 1.1 只允许输入英文字符 ```html &lt;input type="text" onkeyup="value=value.replace(/[^a-zA-Z]/g,'')"&gt; ``` 这一行代码的作用是限制输入框中的文本只能包含英文字符...

    js正则限制input只能输入金额

    限制input只能输入金额 JS代码: function checkInput(_this) { if (_this.value != '' && _this.value.substr(0, 1) == '.') { _this.value = '0.00' } if (_this.value == '') { _this.value = '0.00' } _...

Global site tag (gtag.js) - Google Analytics