Question

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

编辑：在这里复制问题

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

index.html中的at line 25需要z-index: 2

<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>

才能进入background div和front textarea之间相反，插入符号位于底部的前面textarea之后，甚至明确定位插入符号不会使其移动到正确的位置

＆＃13;

function getTime(cb) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '//time.akamai.com/?iso');
    xhr.addEventListener('load', function() {
        cb(new Date(xhr.responseText));
    });
    xhr.send();
}
function timeCB(time) {
    document.getElementById('time').innerHTML = "the time is " + time.toString();
}
getTime(timeCB);

＆＃13;

Answer 1

我不太明白你的问题。据我所知，你只想让你的插入符号在z-index上：2。

所以在CSS中

#caret {
    z-index:2;
}

如果这不是您想要的，那么请使用jsfiddle链接将您的问题更新为正确的问题。

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上尝试一下。我设法让一切正常，所以事实证明我正在做一些麻烦。

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和一个textarea

3 个答案: