小编xem*_*xem的帖子

在更改了一个可信元素的innerHTML后,将插入符放回原位

我需要在JavaScript中每次击键后更新一个可信的P元素的innerHTML

(没有jQuery)

我不能使用输入或textarea而不是P元素.

它工作正常,但是当重置innerHTML时,插入符号始终返回到段落的开头.

我尝试使用其他SO问题的解决方案来讨论插入符号和满足,但它似乎在我的情况下不起作用:我想在更新innerHTML之前将插入符号准确地放回原处.

p.oninput=function(){

  // Get caret position
  c = window.getSelection().
      getRangeAt(0).
      startOffset;
  console.log(c);

  // Update innerHTML
  p.innerHTML = p.innerHTML.toUpperCase();

  // Place caret back
  // ???
}

Run Code Online (Sandbox Code Playgroud)

p{ border: 1px dotted red }

Run Code Online (Sandbox Code Playgroud)

<p contenteditable id=p>type here

Run Code Online (Sandbox Code Playgroud)

顺便说一句,它不需要在IE上工作,但如果你有一个跨浏览器的解决方案,我也会接受它.

谢谢你的帮助!

html javascript caret contenteditable

xem*_*xem

2017 12-12

8
推荐指数

1
解决办法

942
查看次数

如何在 Mapbox-gl-js 中跟踪点（不是虚线）路径？

我正在使用最新版本的 Mapbox-gl-js，我想以等距圆的形式跟踪路径，就像谷歌地图在我们询问“步行”路线时所做的那样：

使用 Mapbox-gl-js，我尝试了虚线和圆形布局，但它们不能满足我的需求：

// Dash
map.addLayer({
  id: 'my-points',
  type: 'line',
  source: 'my-data',
  paint: {
    'line-color': 'gray',
    'line-width': 10,
    'line-dasharray': [1, 1],
  },
});

// Circles
map.addLayer({
  id: 'my-lines',
  type: 'circle',
  source: 'my-data',
  paint: {
    'circle-color': 'red',
    'circle-radius': 3,
  },
});

Run Code Online (Sandbox Code Playgroud)

虚线样式尊重等距但不显示圆圈：