使用jquery将HTML文本和背景颜色添加到html表单中
我正在尝试将文本颜色和背景颜色添加到表单中的隐藏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");
});
});
});
$(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
});
});
更新了演示
更改
$('.preview').click(function(){
$("#testcolor").css("visibility","visible");
});
至
$('.preview').click(function(){
$(".testcolor").css("visibility","visible");
});
你可以使用文本而不是val
var txtcolor = $("#txtcolor").text;
var background = $("#bgcolor").text;
和
$('.preview').click(function(){
$(".testcolor").css("visibility","visible");
});
上一篇: Add text and background color to div from html form using jquery