《前端》JavaScript二轮基础复习（六）--文本框特效--2020年7月17日

最新推荐文章于 2021-06-04 18:36:48 发布

bellediao

最新推荐文章于 2021-06-04 18:36:48 发布

阅读量344

点赞数 1

分类专栏：前端 #JavaScript

本文链接：https://blog.csdn.net/bellediao/article/details/107409823

版权

本文介绍了JavaScript实现前端文本框的各种特效，包括只显示下划线、正则验证email、限制输入数字、首字母大写、字符计数、自动清除内容及电话号码格式校验。并详细讲解了涉及的技术点，如onblur、onmouseover等事件和正则表达式的应用。

摘要由CSDN通过智能技术生成

1、只带下划线的文本框

文本框默认是有四边框的，只要设定文本框style对象的border属性就可以实现只有下划线的文本框。

<style type="text/css">
    body {text-align: center;}    
    div#id-div-center {
        width: 320px;
        height: auto;
        border: 0px solid black;
        margin: 32px auto;
        padding: 2px;}
</style>
<body>
    <div id="id-div-center">
        只带下划线的文本框:&nbsp;&nbsp;
        <input type="text" value="" id="id-input-underline" /><br/>
    </div>
</body>
<script type="text/javascript">
    window.onload = function(ev) {
        var inputUnderline = document.getElementById("id-input-underline");
        // 核心代码为以下三行
        inputUnderline.style.borderColor = 'black'; // TODO: 设置边框颜色
        inputUnderline.style.borderStyle = 'solid'; // TODO: 设置边框样式为实线
        inputUnderline.style.borderWidth = '0 0 1px 0'; // TODO: 设置边框大小，0代表无
    };
</script>

2、用正则表达式验证email格式

H5中使用<input type="email">标签可以验证。不过这并不等于我们不需要去了解相关技术的实现原理。

实现过程中还用到了 onblur事件。主要功能实现是正则的使用。

    <div id="id-div-center">
        请输入Email:&nbsp;&nbsp;<input type="text" value="" id="id-input-email" onblur="validateEmail(this.id)" /><br/><br/> 验证结果:&nbsp;&nbsp;
        <input type="text" id="id-input-result" readonly>
    </div>
</body>
<script type="text/javascript">
    /**
     * validate email format
     * @param thisid
     */
    function validateEmail(thisid) {
        var inputResultDOM = document.getElementById("id-input-result"); // TODO: 获得文本框的DOM
        var inputEmailDOM = document.getElementById(thisid); // TODO: 获得文本框的DOM
        var email = inputEmailDOM.value; // TODO: 获得用户输入的Email

最低0.47元/天解锁文章

bellediao

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
《前端》JavaScript二轮基础复习（六）--文本框特效--2020年7月17日

1、只带下划线的文本框文本框默认是有四边框的，只要设定文本框style对象的border属性就可以实现只有下划线的文本框。<style type="text/css"> body {text-align: center;} div#id-div-center { width: 320px; height: auto; border: 0px solid black; margin: 32px a
复制链接

扫一扫

专栏目录