Question

我有一个表单，当文本框聚焦（onfocus）时，它会使用javascript从文本框左侧触发marquee标记（在本例中为＆＃39; name＆＃39;）。但是在打开模态后，marquee标记会消失，当文本字段再次聚焦（onfocus）时，marquee文本不会显示。

注意 - 我的代码的选框功能仅适用于Mozilla Firefox。所以请尝试使用firefox中的代码。

步骤 -

单击文本框。
＆＃39;名称＆＃39;使用选框流出。
点击“打开模式＆＃39;。
＆＃39;名称＆＃39;消失（一旦模态打开）。
关闭模式。
再次单击文本框，选框文本不会触发。

＆＃13;

<!DOCTYPE html5>
<html>
  <head>
    <meta charset="utf-8">
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <style>
      #vpass{
        display:none;
      }
    </style>

    <script>
      function anim(field) {
        document.getElementById(field).style.display = "block";
      }
    </script>

  </head>
  <body>
    <a href="#" data-toggle="modal" data-target="#modall">Open Modal</a>
    <div class="modal fade" role="dialog" id="modall">
      <div class="modal-dialog">
        <div class = "modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">MODAL</h4>
          </div>
        </div>
      </div>
    </div>
    </br></br></br></br>
    <table>
      <tr>			
        <td width="90px"><label id="vpass"><marquee direction="left" behavior="slide">name</marquee></label></td>
        <td>
          <div class="form-group">
            <input type="text" id="name" class="form-control" placeholder="name" name="name" onfocus= anim("vpass") required/>
          </div>
        </td>
      </tr>
    </table>
  </body>
</html>

＆＃13;

谢谢

Answer 1

请注意<marquee> is an obsolete HTML5 element及其使用情况discouraged by W3C Standards：

<marquee>元素是非标准元素。 HTML5将其归类为不符合要求的功能。

您不应该使用<marquee>因为您无法保证浏览器支持的原因。 Can I Use鼓励了这一建议。

您最好使用CSS3动画或JavaScript为文本添加动画效果。 This question has some good sources关于如何模仿<marquee>行为。

Answer 2

尝试使用现有功能

替换以下动画功能

function anim(field) {
    document.getElementById(field).style.display = "none";
    $('#vpass').html('<marquee behavior="slide" direction="left" scrollamount="10">name</marquee>').show();
}

如果此解决方案有帮助，请不要忘记接受此答案

Answer 3

我稍微重构了代码以使用CSS转换，因为它们提供了更好的性能。这样，移动标签完全不再受模态窗口的影响。请查看下面的更新代码段：

<!DOCTYPE html5>
<html>
  <head>
    <meta charset="utf-8">
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <style>
      td {
        position: relative;
      }
      #vpass {
        position: relative;
        left: 100%;
        transition: left 0.8s ease-in-out;
      }
      #vpass.active {
        left: 0%;
      }
    </style>

    <script>
      function anim(field) {
        document.getElementById(field).className = "active";
      }
      $(document).ready(function() {
        $('#name').on('blur', function() {
          $('#vpass').removeClass('active');
        });
      });
    </script>

  </head>
  <body>
    <a href="#" data-toggle="modal" data-target="#modall">Open Modal</a>
    <div class="modal fade" role="dialog" id="modall">
      <div class="modal-dialog">
        <div class = "modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">MODAL</h4>
          </div>
        </div>
      </div>
    </div>
    </br></br></br></br>
    <table>
      <tr>			
        <td width="90px"><label id="vpass">name</label></td>
        <td>
          <div class="form-group">
            <input type="text" id="name" class="form-control" placeholder="name" name="name" onfocus= anim("vpass") required/>
          </div>
        </td>
      </tr>
    </table>
  </body>
</html>

我还添加了在模糊时停用元素类的功能。如果您有任何问题，请告诉我们！

当模态被触发时，jss启用的css更改会消失

3 个答案: