js验证非空后,输入框边框变红,如果输入正确怎么让边框恢复到默认的颜色?

JavaScript017

js验证非空后,输入框边框变红,如果输入正确怎么让边框恢复到默认的颜色?,第1张

默认的边框样式应该是无法恢复的,不同浏览器的边框也不一样。

不过你可以在文本框外面加一个span,只改变span的边框(需要调整一下padding),这样就可以恢复了:

<html>

<head>

    <script type="text/javascript">

        var t = 0

        function showBorder() {

            var answer3 = document.getElementById("yearId").value

            if (t == 0) {

                t = 1

                document.getElementById("yearId").parentElement.style.border = "0"

            }

            else {

                t = 0

                document.getElementById("yearId").parentElement.style.border = "1px solid black"

            }

        }

    </script>

</head>

<body>

        <span style="padding-bottom: 2px padding-top: 1px padding-left: 0 padding-right: 0">

            <input type="text" id="yearId" name="yearId" size="16" /></span>

        <input type="button" value="show border" onclick="showBorder()" />

</body>

</html>

效果图:

<!Doctype HTML>

<html>

<head>

<title>文本框宽度自动适应文本宽度 </title>

</head>

<script type="text/javascript">

function changeInputlength(cursor)

{

var getcount=document.getElementById("countFont")

var getText=document.getElementById("text")

getcount.innerHTML='<font>第'+(parseInt(getText.value.length)+1)+'个字符</font>'

cursor.size=getText.value.length+2

}

</script>

<body>

请输入字符:<input type="text" size="3" id="text" onkeydown="changeInputlength(this)"/>

<span id="countFont"></span>

</body>

</html>

js实现点击输入用户名或密码的文本框在旁边弹出提示语 你可以使用formValidator.js,专门做表单验证的,效果如下:用法很简单,引用formValidator.js的核心类库,然后初始化$.formValidator.initConfig({formid: main ,debug:false,submitOnce : true})然后对要做校验的文本框编写校验代码$( #employeeNo ).formValidator({onshow : 输入范围为1到10个字符 ,在后面对应的显示提示语formValidator.js这个网上有很多实例和教程,很简单的