JS怎么控制文本框输入的长度

JS怎么控制文本框输入的长度,第1张

JS控制文本框输入的长度的方法如下:

1、html页面中有以下文本:

<input id="groupidtext" type="text" style="width: 100px" maxlength="6" /></td>

2、用js限制输入的最大长度的脚本如下:

$(function)

$('#groupidtext').on {'input', function(e) }

if(this.value.length === 6) { //如果输入长度等于6,则禁用输入}

$('input[type="submit"]').prop('disabled', false)

else 

$('input[type="submit"]').prop('disabled', true)

js限制文本框输入的长度为18位字符, 只能是数字和字母,如果输入的字符超过18位就不能在输入了。

这个无需JS,用input text标签的maxlength属性即可实现。                                              代码如下:

<input type="text" maxlength="18" />

maxlength 属性后面设置需要限制的字段最大长度即可。

精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

event.clientX 相对文档的水平座标

event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标

event.offsetY 相对容器的垂直坐标

document.documentElement.scrollTop 垂直方向滚动的值

event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

实现代码

<!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>请调整浏览器窗口</title><meta http-equiv="content-type" content="text/htmlcharset=gb2312">

</meta></head>

<body>

<h2 align="center">请调整浏览器窗口大小</h2><hr />

<form action="#" method="get" name="form1" id="form1">

<!--显示浏览器窗口的实际尺寸-->

浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"/><br />

浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"/><br />

</form>

<script type="text/javascript">

<!--

var winWidth = 0

var winHeight = 0

function findDimensions() //函数:获取尺寸

{

//获取窗口宽度

if (window.innerWidth)

winWidth = window.innerWidth

else if ((document.body) &&(document.body.clientWidth))

winWidth = document.body.clientWidth

//获取窗口高度

if (window.innerHeight)

winHeight = window.innerHeight

else if ((document.body) &&(document.body.clientHeight))

winHeight = document.body.clientHeight

//通过深入Document内部对body进行检测,获取窗口大小

if (document.documentElement &&document.documentElement.clientHeight &&document.documentElement.clientWidth)

{

winHeight = document.documentElement.clientHeight

winWidth = document.documentElement.clientWidth

}

//结果输出至两个文本框

document.form1.availHeight.value= winHeight

document.form1.availWidth.value= winWidth

}

findDimensions()

//调用函数,获取数值

window.onresize=findDimensions

//-->

</script>

</body>

</html>

首先你要设定好文本框宽度,然后手动输入字符(最好用数字)来确定文本框有中能输入多少个数字。

一个数字、一个英文字母 = 1个字节

一个汉字 = 2个字节

有了以上信息:我们就可以用js或jquery去获取文本框中的文本,计算文本框中有多少个字节。

假设:

文本框宽 = 30像素 实际可以写入10个数字也就是10个字节,多于10就超出文本框的款度。

再假设文本框中输入:123abc字节数

用js通进正则我们找出汉字个数 乘以 2 就是汉字所占的字节,加上非汉字的字符(全角符号也是2个字节),上例中一个有12个字节

我们知道现文本框中 >10字符就超出了文本框宽度。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/11067361.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-13
下一篇 2023-05-13

发表评论

登录后才能评论

评论列表(0条)

保存