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>

用JavaScript的DOM模型可以很方便地 *** 作html标记,首先,你获得input标记的DOM对象,于是,我们就可以利用获得的inputTxta对象来 *** 作该标记,你用DOM对象的API可以实现增加属性功能。代码如下:首先,创建一个属性节点var attri=document.createAttribute("size")创建一个size属性节点然后就可以对该size属性赋具体长度值了 attri.value="10"(假如要设置text文本框长度为10)然后利用inputTxta对象将该属性节点添加到input标记中 inputTxta.setAttribute(attri)搞定,呵呵,希望对你有所帮助!


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

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

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

发表评论

登录后才能评论

评论列表(0条)

保存