使用jquery将文本和背景颜色从html表单添加到div答案

【问题标题】：Add text and background color to div from html form using jquery使用jquery将文本和背景颜色从html表单添加到div
【发布时间】：2013-01-02 09:00:46
【问题描述】：

我正在尝试将文本颜色和背景颜色添加到表单中的隐藏 div。一旦填充了文本或背景输入字段，div 也应该以新颜色和背景显示预先填充的文本。代码如下：

对于 CSS

.testcolor{
    width:250px;
    height:150px;
    border:1px solid #000000;
    display:hidden; 
}

对于 HTML

<form id="myform" action="" method="post"> 
    <input type="text" id="txtcolor" class="tstcolor" name="txtcolor" value="#FF0000">
    <input type="text" id="bgcolor" class="tstcolor" name="bgcolor" value="#FFFFFF">
    <a href="#" class="preview">Preview</a>
    <div class="testcolor">
        Lorem ipsum ist nuch nach in die postimen obscurites nang interust ingrostech hochester gelumen bransiolen.
    </div>
</form>

对于 Javascript

$(document).ready(function(){
    $(".tstcolor").keyup(function(){
        var txtcolor = $("#txtcolor").val();
        var background = $("#bgcolor").val();

        $("#txtcolor").css("color",txtcolor);
        $("#bgcolor").css("background-color",background);

        $('.preview').click(function(){
            $("#testcolor").css("visibility","visible");                        
        });
    });
});

【问题讨论】：

不要粘贴所有代码 - 使用 JSFiddle 给出一个实时示例 - 我们也可以轻松查看

标签： jquery html

【解决方案1】：

$(document).ready(function(){
    $(".tstcolor").keyup(function(){
        var txtcolor = $("#txtcolor").val();
        var background = $("#bgcolor").val();

        $("#txtcolor").css("color",txtcolor);
        $("#bgcolor").css("background-color",background);
        });

        $('.preview').click(function(){ // Place onclick outside keyup event
            var txtcolor = $("#txtcolor").val();
            var background = $("#bgcolor").val();
            $(".testcolor").css({"background-color":background,"color":txtcolor}).show();//use class selector,i.e (.) for class and (#) for id                       
        });

});

Updated Demo

【讨论】：

谢谢。这就是我想要的。还有一个问题，如何在不单击预览按钮的情况下使 div 出现，即，我希望它出现并在键入任一输入文件后显示更改。点击 div 关闭它呢？
谢谢诗巫。像魅力一样工作:)

【解决方案2】：

改变

$('.preview').click(function(){
            $("#testcolor").css("visibility","visible");                        
});

到

$('.preview').click(function(){
   $(".testcolor").css("visibility","visible");                        
});

【讨论】：

【解决方案3】：

你可以使用 text 代替 val

var txtcolor = $("#txtcolor").text;
var background = $("#bgcolor").text;

和

$('.preview').click(function(){
 $(".testcolor").css("visibility","visible");                        
});

【讨论】：

【解决方案4】：

试试这个：

$(".tstcolor").keyup(function() {

    var txtcolor = $("#txtcolor").val();
    var background = $("#bgcolor").val();
    $("#txtcolor").css("color", txtcolor);
    $("#bgcolor").css("background-color", background);
});

$('.preview').click(function(e) {

    e.preventDefault();
    $(".testcolor").show().css({
        'color': $("#txtcolor").val(),
        'background-color': $("#bgcolor").val()
    });
});

DEMO HERE

【讨论】：

【解决方案5】：

您提到的是#testcolor 而不是.testcolor，并且您将css 属性分配给TextBoxes 而不是div。更改单击事件中的 css 属性，因为您希望在单击 a 标记时显示更改。（如果您在点击事件之外更改 css，那么只要 TextBoxes 的值发生更改，div 就会更改）

Working Fiddle

$(document).ready(function(){
   $(".tstcolor").keyup(function(){
      var txtcolor = $("#txtcolor").val();
      var background = $("#bgcolor").val();            
      //removed div css properties from here
      $('.preview').click(function(){
         //added div css properties
         $(".testcolor").css("color",txtcolor);               
         $(".testcolor").css("background-color",background);
         //replaced '#' with '.'
         $(".testcolor").css("visibility","visible");              
      });
   });
});

检查这个Working Fiddle

【讨论】：