使用javascript和下拉菜单更改多个文本区域css值
Changing multiple textareas css values with javascript and dropdown?
http://jsfiddle.net/g3u7hxr6/4/
我有以下代码,目前它用下拉框更改所有文本区域的css值。
我希望这样,当选择1个文本区域并显示为绿色时,下拉框将只更改所选文本区域的css,而不是所有文本区域。
基本上,我希望能够单独更改每个文本区域的字体。
我考虑使用另一个下拉框来选择要更改的文本区域。但是javascript必须有一种方法来检测所选的文本区域并只对其进行更改。我需要为每个文本区域添加一个唯一的id字段,但我完全不懂javascript。请帮忙!!!
感谢Binvention回答:http://jsfiddle.net/g3u7hxr6/19/
JS:
$(function () {
$("[id^=font]").on('change', function () {
$('.address').css(this.id, /'d/.test(this.value) ? this.value + "px" : this.value);
});
});
$('.address').focus(
function(){
$(this).parent('div').css('box-shadow','0px 0px 10px green');
}).blur(
function(){
$(this).parent('div').css('box-shadow','0px 0px 0px');
});
HTML:
<div class="options">
<div class="left">Font:
<br>Size:
<br>Weight:</div>
<div class="right">
<select name="fontFamily" id="fontFamily">
<option selected value="Verdana">Verdana</option>
<option value="Arial">Arial</option>
</select>
<br>
<select name="fontSize" id="fontSize">
<option value="8">8</option>
<option selected value="16">16</option>
<option value="24">24</option>
</select>
<br>
<select name="fontWeight" id="fontWeight">
<option selected value="Bold">Bold</option>
<option value="Normal">Normal</option>
</select>
<br /> <br />
</div>
<div class="page">
<div class="left border">
<textarea class="address" tabindex="1">text area 1</textarea>
</div>
<div class="right border">
<textarea class="address" tabindex="4">text area 4</textarea>
</div>
<div class="left border">
<textarea class="address" tabindex="2">text area 2</textarea>
</div>
<div class="right border">
<textarea class="address" tabindex="5">text area 5</textarea>
</div>
<div class="left border">
<textarea class="address" tabindex="3">text area 3</textarea>
</div>
<div class="right border">
<textarea class="address" tabindex="6">text area 6</textarea>
</div>
</div>
CSS:
.left {
float: left;
}
.right {
float: right;
}
.options {
width: 200px;
}
.page {
width: 440px;
}
.border {
border:1px solid #888;
border-radius: 5px;
padding: 5px;
margin: 0 0px 0px 0;
}
textarea {
resize:none;
height: 100px;
width: 200px;
overflow: auto;
font-family: Verdana;
font-size: 16px;
}
您需要创建一个唯一的类,将一个类标记为选中,如
$('textarea').click(function(){
$(this).toggleClass('textselected');
});
这将允许您动态选择要编辑的文本框,只需单击即可编辑,单击即可取消选择编辑。不过,您需要一些css来区分选中和未选中。然后,当您编辑字体和文本属性时,您使用该特殊类而不是文本区域来选择类似的属性
$("[id^=font]").on('change', function () {
$('.textselected').css(this.id, /'d/.test(this.value) ? this.value + "px" : this.value);
});
});
我已经编辑了你的小提琴,在这里进行了必要的更改
您需要在焦点事件中添加$(this).addClass('selected');
,并在更改事件中将选择器更改为$('.address.selected')
。
相关文章:
- onkeyup无法动态创建多个文本区域
- 具有所有样式的文本正在复制到可编辑文本区域
- 在文本区域POST后解码JSON
- 在文本区域中使用jQuery.text()保持换行符
- ng在下拉列表和文本区域提交
- 将文本插入光标所在的文本区域
- 离开页面导航后保留文本区域内容
- Javascript-在文本区域中断,但不在段落中中断
- 当选择值x时,Javascript需要在正确的位置显示文本区域,从而循环通过具有选择选项的表单
- 测试文本区域中的特定文本格式
- 文本编辑后,append函数不适用于文本区域
- 如何在ReactJs中链接下拉列表和文本区域
- I'我试图在文本区域中进行特定的输入,调用特定的javascript函数,但没有成功;不起作用
- 使用JSON文件中的变量(字符串)填充文本区域
- JavaScript-如果以前不存在文本,如何从文本区域删除新行
- 如何在php中创建一个函数,该函数与文本区域一起工作,通过输入类似[color:red]的内容来打印具有等效颜色的文本
- 如何为动态创建的文本区域中输入的值更新ng模型
- 延迟高亮显示文本区域中的文本
- 将字母添加到文本区域的末尾
- TinyMCE在新添加的文本区域