检查文本的最小长度并用JS更改某个<span>？

Question

我现在已经设置好了：

<div class="col-sm-offset-4 col-sm-4">
            <form method="post">
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon danger"><span class="glyphicon glyphicon-remove"></span></span><input type="text" class="form-control" name="validate-text" id="validate-text" placeholder="Username">

                    </div>
                </div>
            </form>
</div>

我想把用户名前面的span改成：

<span class="input-group-addon danger"><span class="glyphicon glyphicon-remove"></span></span>

如何让 javascript 检查此框中的文本并更改跨度？

Answer 1

如果你使用jQuery，这应该给你输入文本的长度：

$('input#validate-text').val().length

Answer 2

You have to add and remove classes according to length modifications. Check out example below. When input length is greater than 5 it will add class glyphicon-ok else glyphicon-remove

$(document).ready(function() {
   $("#username").keyup( function () {
    if($(this).val().length > 5) {
     $("#usernameIcon").removeClass("glyphicon-remove");
     $("#usernameIcon").addClass("glyphicon-ok");
    } else {
     $("#usernameIcon").removeClass("glyphicon-ok");
     $("#usernameIcon").addClass("glyphicon-remove");
    }
   });
  });

<!doctype html>
<html lang="en">

<head>
 <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
 <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
 <div class="col-sm-offset-4 col-sm-4">
     <form method="post">
         <div class="form-group">
             <div class="input-group">
                 <span class="input-group-addon danger"><span id="usernameIcon" class="glyphicon glyphicon-remove"></span></span><input id="username" type="text" class="form-control" name="validate-text" id="validate-text" placeholder="Username">
             </div>
         </div>
     </form>
 </div> 
</body>

</html>

检查文本的最小长度并用JS更改某个<span>？

Check text for minimum length and change a certain <span> with JS?

javascript

object