javascritp实现input输入框相关限制用法
1.取消按钮按下时的虚线框
在input里添加属性值 hideFocus 或者 HideFocus=true
2.只读文本框内容
在input里添加属性值 readonly
3.防止退后清空的TEXT文档(可把style内容做做为类引用)
<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">
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 maxlength=9
onkeyup="if(value.match(/^\d{3}$/))value=value.replace(value,parseInt(value/10))
;value=value.replace(/\.\d*\./g,'.')"
onKeyPress="if((event.keyCode<48 || event.keyCode>57) &&
event.keyCode!=46 && event.keyCode!=45 || value.match(/^\d{3}$/)
|| /\.\d{3}$/.test(value)) {event.returnValue=false}" id=text_kfxe
name=text_kfxe>
--------------------------------------------------------------------------------------------------
几种常用禁止修改输入框的方法
1, 通过js实现-onfocus="this.blur()"
| 代码: |
|
<input type="text" value="fisker" onclick="alert(this.value);" onfocus="this.blur()" />
|
|
输入框无法获得焦点，不能编辑
表单可以获得值。
可以复制。
蛮奇怪的，都选住了，还没有获得焦点？
2,readonly
| 代码: |
|
<input type="text" value="fisker" onclick="alert(this.value);" readonly />
|
|
输入框只读。不能编辑
同样表单可以获得值。
也可以复制。
3,disabled
| 代码: |
|
<input type="text" value="fisker" onclick="alert(this.value);" disabled />
|
|
输入框灰色，不能编辑
可以用JS改变或获得其值，但提交时并不提交该值。
第一和第二效果差不多。视觉上
第一个，点击的时候光标会闪烁一下。
第三个，灰色的输入框看起来还是不喜欢。
输入框自动更新
要完成此效果把如下代码加入到<body>区域中
<form name=form>
<div align="center">输入字符 -
<input type=text name=textvalue size=25>
<br>
<br>
一次复制 -
<input type=text name=mem1 size=25 onFocus="if (this.value == ''){this.value=(textvalue.value)}">
<br>
两次复制 -
<input type=text name=mem2 size=25 onFocus="if (this.value ==
''){this.value=(textvalue.value + ' ' + textvalue.value)}">
<br>
<br>
<input type=reset value="Reset" name="B2">
</div>
</form>
分享到：
相关推荐
### JS各种限制input输入汇总知识点解析 #### 一、取消按钮按下时的虚线框 在Web开发过程中，用户点击按钮或输入框等元素时，可能会出现边框高亮的效果，这种效果通常是为了提高交互性而设计的。但在某些场景下，...
<script type="text/javascript" src="Scripts/jquery-1.6.2.js"> ``` ### 知识点二：事件绑定方法 在jQuery中，给元素绑定事件通常有几种方式，而给input绑定回车事件主要涉及以下两种方法： #### 方法一：使用`...
在网页开发中，事件处理是JavaScript的一个核心部分，用于响应用户的操作。常见的事件包括： - **`onBlur`**：当元素失去焦点时触发。 - **`onFocus`**：当元素获得焦点时触发。 - **`onChange`**：当用户更改域的...
以下是一些经典的JavaScript技巧，涵盖了事件处理、样式修改、用户交互等多个方面： 1. **文本框焦点问题**：`onBlur` 和 `onFocus` 事件是用于处理输入框焦点变化的。`onBlur` 在元素失去焦点时触发，`onFocus` 在...
### 常用JS代码知识点解析 #### 一、文本框焦点问题 在网页开发中，文本框的焦点控制非常重要，它可以改善用户体验，使交互更加友好。以下是一些与文本框焦点相关的事件： 1. **`onblur`**: 当文本框失去焦点时...
根据给定的文件标题、描述、标签以及部分内容，本文将详细介绍JavaScript中...以上就是基于提供的文件内容整理出的JavaScript判断和验证方法汇总。通过这些实用的技巧，可以有效地提高前端表单的用户体验和数据完整性。
从动态增减输入框，到输入内容的实时检测与反馈，以及数据的汇总处理，这些知识点不仅涵盖了jQuery的基本操作，也包含了事件监听、正则表达式验证、字符串操作以及动态DOM元素管理等重要的Web前端开发技能。
JS 控制文本框只能输入数字 代码如下: <input onkeyup=”value=value.replace(/[^0-9]/g,”)” onpaste=”value=value.replace(/[^0-9]/g,”)” oncontextmenu =”value=value.replace(/[^0-9]/g,”)”> JS...
根据给定的文件标题、描述、标签以及部分内容，本文将详细介绍JavaScript验证的相关知识点。这些验证方法主要用于前端数据校验，确保用户输入的数据符合预期格式或条件。 ### 1. 检查表单字段是否为空 ```...
JavaScript知识点汇总.pdf主要涵盖的是与JavaScript相关的编程概念和实践技巧，同时也涉及到了HTML的基础知识，因为JavaScript常常与HTML配合使用来构建动态网页。以下是对这些知识点的详细解释： 1. **HTML的概念*...
`GetValue()`函数用于收集所有动态添加的文本框中的值，并将它们汇总到一个单独的输入框中。这在处理多条用户输入数据时非常有用，例如在填写多个联系人信息或提交多个商品时。 ```javascript function GetValue() ...
JavaScript是Web开发中不可或缺的一部分，尤其...以上是对给定面试题目的详细解答，涵盖了JavaScript的基本语法、面向对象、DOM操作、异常处理、Ajax等多个方面。这些知识对于理解和解答JavaScript面试问题非常有帮助。
根据给定的信息，我们可以整理出一系列与JavaScript相关的实用技巧，涉及事件处理、样式调整、页面控制等多个方面。接下来，我们将详细解析这些技巧及其应用场景。 ### 1. JavaScript 事件处理 - **`onBlur`**: 当...
### 107句JS常用语句解析 #### 1. 输出语句 - **语法**: `document.write("");` - **用途**: 在HTML文档中直接输出文本或变量。 - **示例**: `document.write("Hello World!");` #### 2. JS中的注释 - **语法**: `...
本篇文章将汇总jQuery中与Form相关的知识，特别是关于单行文本获取和失去焦点，以及如何改变多行文本框高度的操作。 首先，让我们来看一下如何处理form中的单行文本获取和失去焦点。在示例代码中，我们使用了`:...
Vue.js 是一款流行的轻量级前端JavaScript框架，以其声明式编程和组件化开发特性而闻名。在面试中，了解Vue.js及其相关库如Vue Router和Vuex是非常重要的。以下是一些关于Vue.js及其周边技术的常见面试问题及答案： ...
在内，有两个主要部分和，分别处理元数据（如标题、样式和脚本）和实际可见内容。 2. **头部元素**：内的标签定义了网页的标题，显示在浏览器的标签页上。标签用于设置页面的元信息，如字符编码、关键词等。元素...
在这个例子中，`{{ name }}`是View的一部分，`v-model`指令实现了双向数据绑定，使得输入框的值与`name`数据属性保持同步，体现了Vue.js中的MVVM理念。 总的来说，Vue.js的MVVM实现使得开发者能够专注于业务逻辑和...