Html之【Text文本框】综合技巧大全（持续更新中...）

最新推荐文章于 2023-03-18 09:34:18 发布

敦厚的曹操

最新推荐文章于 2023-03-18 09:34:18 发布

阅读量7.3k

点赞数 1

分类专栏： 4.【html】 5.【css】文章标签： html input table

本文链接：https://blog.csdn.net/dxnn520/article/details/8037575

版权

5.【css】同时被 2 个专栏收录

84 篇文章 0 订阅

订阅专栏

4.【html】

83 篇文章 1 订阅

订阅专栏

一、如何将文本框里的文字垂直居中?

加入 verticla-align、line-height 两个属性后，文本框中的文字就在文本框中垂直居中了，要注意的是 line-height 必须要等于 height

<html>  
<head>  
<style type="text/css">  
    #text {  
        height:20px;  
        vertical-align:middle;  
        line-height:20px;  /*line-height must be equal to height*/

        /* padding:8px 0 0 15px;  通过这个调整也可以*/
    }  
</style>  
</head>  
<body>  
    <table>  
        <input type="text" id="text">  
    </table>  
</body>  
</html>

二、文本框中限制输入字符数

在HTML网页中，要想textbox的长度随着输入的字符增多而变长，可以用到CSS的overflow属性。

如下：

< input name ="test" type ="text" style ="overflow:visible" size ="10" maxlength ="50" >

请注意要加上合适的maxlength限制，不然的话整个版面将会被撑得很难看。

overflow属性规定当元素里的内容超出显示范围，应该怎样应对。

三、用Jquery改变或清空Text中的值

$("#Text1").val("");

四、限制文本框只能输入【数字】

方法1：输入中，如果出现字母，自动清空！

方法2：离开文本框时，提示：
<input maxlength="2"name="text" id="Text4" class="inputsty1" οnchange="if(/\D/.test(this.value)){alert('只能输入数字');this.value='';}"/>

五、Jquery控制文本框和焦点

$("#Text1").val("公交"); //赋值

 $("#Text1").val(""); //清空

 var mbt = $("#Text1").val();  // 获取值

$(”#Text1”)[0].focus()// 文本框获得焦点

敦厚的曹操

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Html之【Text文本框】综合技巧大全（持续更新中...）

一、如何将文本框里的文字垂直居中? 加入 verticla-align、line-height 两个属性后，文本框中的文字就在文本框中垂直居中了，要注意的是 line-height 必须要等于 height #text { height:20px; vertical-align:middle;
复制链接

扫一扫