覆盖 2 个 div 和一个文本区域

Question

可以找到代码片段和相关问题here on github
文本区域是问题的根本原因吗？
我也尝试过使用 <div contenteditable> </div> 而不是 <textarea></textarea>

EDIT: copying question here

<div id="caret"></div>

at line 25 in index.html needs to be put on z-index: 2 in order to come between the background div and the front textarea
相反，插入符出现在底部的前文本区域之后，即使明确定位插入符 div 也不会使其移动到正确的位置

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-sanitize.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>

<link rel="stylesheet" href="http://raw.github.com/ishankhare07/syntax-highlighter/blob/gh-pages/static/css/index.css">
<script type="text/javascript" src="http://raw.github.com/ishankhare07/syntax-highlighter/blob/gh-pages/static/js/app.js"></script>

<div class="container top-offset" ng-controller="EntryController as highlighter">
  <div class="row top-buffer">
    <input placeholder="Enter filename with extension" ng-model="highlighter.filename" class="rounded-border col-md-6">
    <div class="col-md-6 text-center">{{ highlighter.filename }}</div>
  </div>
  <div class="row top-buffer panel panel-default" id="code">
    <div class="code highlight" id="background">
    </div>
    <textarea spellcheck="false" class="code panel-default" id="front" ng-change="highlighter.change()" ng-model="highlighter.code"></textarea>
    <div id="caret">

    </div>
  </div>
</div>

Answer 1

我不太明白你的问题。据我所知，您只希望插入符号 div 位于 z-index:2.

所以在 CSS

#caret {
    z-index:2;
}

如果这不是您要查找的内容，请使用 jsfiddle link.

将您的问题更新为正确的问题

Answer 2

我对您的主题有点困惑，但这是 java 中使用本地存储

制作的 div 文本编辑器

<html>
</head>
<body>
<link rel="stylesheet" type="text/css" href="opensheet.css" />
<h1>SCRAPS.txt</h1>
<div class="notepad" contentEditable="true"></div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/zepto/1.0rc1/zepto.min.js "></script>
<script>
$( function() {
var ls = window.localStorage


if (ls.getItem('data')) {
$('.notepad').text(ls.getItem('data'));
}


$('.notepad').blur( function() {
ls.setItem('data', $('.notepad').text() );
});
});
</script>
</body>
</html>

Answer 3

感谢您的反馈，我完全同意我未能正确解释我的问题，并采纳了您的建议在 jsfiddle 上尝试一下。我设法让一切正常工作，结果发现我在做一些 css 混乱。

html

<body ng-app="highlighter">
    <div class="container borders" ng-controller="ColorController as color">
        <div id="background" class="borders expand overlay text-padding">
            {{ color.code }} voila!
        </div>
        <div id="caret" class="borders expand overlay text-padding">
            {{ color.caretText }}
        </div>
        <textarea id="text" class="borders expand overlay text-padding" ng-model="color.code" ng-change="color.change()">
        </textarea>
    </div>
</body>

js

var app = angular.module("highlighter",[]);

app.controller('ColorController', function () {
    this.code = "";
    this.caretText = "";
    this.caret = "&#x2588;";

    var whitespaces = [" ", "\t", "\n", "\v", "\r"];

    this.change = function() {
        this.caretText = "";
        angular.element(document.querySelector('#caret')).html(this.caretText)
        for(var i=0; i < this.code.length; i++) {
            if(whitespaces.indexOf(this.code[i]) != -1) {
                // is a whitespace
                this.caretText += this.code[i];
            } else {
                this.caretText += " ";
            }
        }

        this.caretText += this.caret;

angular.element(document.querySelector('#caret')).html(this.caretText)
        console.log(this.caretText);
    };
});

css

.borders {
    border-style: solid;
    border-width: 1px;
    border-color: aqua;
    border-radius: 3px;
}

.expand {
    padding: 10%;
    height: 80vh;
    width: 90vw;
}

.overlay {
    position: absolute;
    top: 20vh;
}

#background {
    z-index: 1;
}

#caret {
    z-index: 2;
    color: rgba(250,80,150, 0.5);
    white-space: pre;
}

#text {
    z-index: 3;
    color: rgba(0,0,0,0);
    background-color: rgba(0,0,0,0);
}

.text-padding {
    padding: 10px;
    font-size: 1em;
    font-family: monospace;
}

覆盖 2 个 div 和一个文本区域

overlay 2 divs and a textarea

html

css

z-index

twitter-bootstrap