Question

我正在使用我在网上找到的脚本在html表单上添加输入提示。我把它全部工作了，但现在代码随机生成了一个样式标签，它正在抛弃我的CSS。该代码应该生成如下所示的span标记：

<span id="input-prompt-0" class="input-prompt">Company Name</span>

对于每个文本输入字段。相反，它一直给我这个：

<span id="input-prompt-0" class="input-prompt" style="display: block;">Company Name</span>

任何想法为什么？

以下是代码：

$(document).ready(function(){
  $('input[type=text][title],input[type=password][title],textarea[title]').each(function(i){
    $(this).addClass('input-prompt-' + i);
    var promptSpan = $('<span class="input-prompt"/>');
    $(promptSpan).attr('id', 'input-prompt-' + i);
    $(promptSpan).append($(this).attr('title'));
    $(promptSpan).click(function(){
      $(this).hide();
      $('.' + $(this).attr('id')).focus();
    });
    if($(this).val() != ''){
      $(promptSpan).hide();
    }
    $(this).before(promptSpan);
    $(this).focus(function(){
      $('#input-prompt-' + i).hide();
    });
    $(this).blur(function(){
      if($(this).val() == ''){
        $('#input-prompt-' + i).show();
      }
    });
  });
});

Answer 1

第$('#input-prompt-' + i).show();行正在修改样式。来自jQuery.show上的文档：

匹配的元素将立即显示，没有动画。这大致相当于调用.css（'display'，'block'），除了 display属性恢复到最初的状态。

我想更突出的问题是为什么这会“抛弃[你的] css”？

Answer 2

这行代码添加了style属性：

$('#input-prompt-' + i).show();

您可以改为使用：

$('#input-prompt-' + i).css("display", "");

这将显示范围并消除样式属性。

Answer 3

问题很可能与您使用.show（）和.hide（）。

有关

这些功能会改变元素的风格，从而发挥其魔力。

Answer 4

JQuery show（）和hide（）函数修改了样式

为什么javascript会添加随机样式标记？

4 个答案: