Question

我在MVC项目中有textarea控件。我还有两个按钮＆＃34; UP＆＃34;和＆＃34; DOWN＆＃34;。想象一下，在textarea中存在3行文本。我想在textarea的后台第一行加载页面背光后。当我按下＆＃34; DOWN＆＃34;按钮，第一行将是通常的背景，第二行是具有前一行的背景。

所以我的问题是：我可以用jQuery脚本在文本区域中背光一行吗？如果是，我该怎么办？

从HTML我只有这个：

<textarea id="XMLView" rows="30" wrap='off' style="width: 95%">
line1
line2
line3
</textarea>

在jQuery中我有这个：

$("#XMLView").Hover(function () {
    $("#XMLView").HoverLine.BackGroung-Color="red";
    alert($("#XMLView").HoverLine.Text);
});

Answer 1

请记住，这个问题似乎是XY的主要候选人，这里是这个特定场景的解决方案，虽然它并不是特别优雅。

对于HTML，你不能在textarea中渲染（绝大多数）标记，所以操纵CSS最容易使用<div contenteditable="true">并使用classes / id在div中创建项来访问DOM元素由

HTML：

<div contenteditable="true">
    <p tabindex="1" class="focusColor focused">line1</p>
    <p tabindex="2" class="focusColor">line2</p>
    <p tabindex="3" class="focusColor">line3</p>
</div>

应用背景颜色的简单CSS。这有点傻但你可以使用.focused类或:focus功能，我更喜欢内置的:focus，因为.focused类有点人为。

CSS：

.focusColor:focus {
    background-color: #000000;
}

Javascript主要来自另一个Stackoverflow线程，添加了我们的自定义（向上/向下键，分别为38/40码）和e.preventDefault()以及e.stopImmediatePropagation();。这有点挑剔，需要更多关于你想要keydown事件触发的其他内容的知识。

JS：

$(document).keydown(function(e){    
    if (e.keyCode == 38) {
        e.preventDefault();
        e.stopImmediatePropagation();
        if($('.focused').prev('.focusColor').length){
            $('.focused').removeClass('focused').prev('.focusColor').focus().addClass('focused');
        }
    }
    if (e.keyCode == 40) {
        e.preventDefault();
        e.stopImmediatePropagation();
        if($('.focused').next('.focusColor').length){
            $('.focused').removeClass('focused').next('.focusColor').focus().addClass('focused');
        }
    }
});

更改textarea中所选行的背景颜色

1 个答案: