如何在javascript中向前或向后查找用户选择天气？
Posted
技术标签:
【中文标题】如何在javascript中向前或向后查找用户选择天气？【英文标题】：How to find a user selection weather forward or backward in javascript? 【发布时间】：2017-06-19 18:05:48 【问题描述】：我是 javascript 新手。我正在尝试使用用户选择方向制作一个简单的切换 div /p>
当我选择段落前面的一些文本时它可以正常工作就像这样
但是当我从底部段落中选择一些文本时，它没有按预期工作
JsFiddle
实际上我正在使用 React 版本的 Fiddle 在 Jquery 中
这是我的代码
import React from 'react'
import render from 'react-dom';
export default class App extends React.Component
constructor(props)
super(props);
this.state =
display:'none' ,
top:'',
bottom:'',
left:'',
right:'',
diplayForDown:'none'
;
this.handleOnMouseDown = this.handleOnMouseDown.bind(this)
this.onMounseUp = this.onMounseUp.bind(this)
this.onMouseDwn = this.onMouseDwn.bind(this)
this.triggerAlltime = this.triggerAlltime.bind(this)
handleOnMouseDown()
let sel = window.getSelection && window.getSelection();
let r = sel.getRangeAt(0).getBoundingClientRect();
let relative=document.body.parentNode.getBoundingClientRect();
console.log('Relative ',relative);
if(!sel.isCollapsed)
console.log(sel,r);
let display = 'block';
let top = (r.bottom - relative.top - 80)+'px';
let bottom = r.bottom+'px';
let left =( r.left)+'px';
let right = (r.right)+'px';
console.log('This is Height',r.bottom-r.top);
let selectionHeight = r.bottom - r.top;
if(selectionHeight => 22.22)
this.setState(
display,
top:top,
bottom,
left,
right
)
else
this.setState(
display,
top,
bottom,
left,
right
)
else
this.setState(
display:'none'
)
console.log('Slected')
onMounseUp(e)
e.preventDefault()
let sel = window.getSelection && window.getSelection();
if(!sel.isCollapsed)
console.log('Moved Up')
onMouseDwn(e)
let sel = window.getSelection && window.getSelection();
if(!sel.isCollapsed)
console.log('Moved Down')
getSelectionhtml()
let html = "";
if (typeof window.getSelection != "undefined")
let sel = window.getSelection();
if (sel.rangeCount)
let container = document.createElement("div");
for (let i = 0, len = sel.rangeCount; i < len; ++i)
container.appendChild(sel.getRangeAt(i).cloneContents());
html = container.innerHTML;
else if (typeof document.selection != "undefined")
if (document.selection.type == "Text")
html = document.selection.createRange().htmlText;
console.log('html',html)
return html;
lastCharRTL(txt)
return /[\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC]$/.test(txt);
triggerAlltime(e)
// console.log('Some Thinms')
if(!window.getSelection().isCollapsed)
//find the Direction Of Slelection
let sel = window.getSelection();
console.log(sel)
let range = document.createRange();
range.setStart(sel.anchorNode, sel.anchorOffset);
range.setEnd(sel.focusNode, sel.focusOffset);
let backwards = range.collapsed;
range.detach();
// get selection rects
let rects = sel.getRangeAt(0).getClientRects();
let n = rects.length - 1;
let display = 'block';
console.log(this.lastCharRTL(this.getSelectionHtml()))
if (this.lastCharRTL(this.getSelectionHtml()))
this.setState(
display:'none',
diplayForDown:'none',
top: rects[n].top + 10,
left: rects[n].left - 10
)
else if (backwards)
this.setState(
display,
diplayForDown:'none',
top: rects[0].top + -68,
left: rects[0].left
)
else
this.setState(
display:'none',
diplayForDown:'block',
top: rects[n].top + 40,
left: rects[n].right+-160
)
else
this.setState(
display:'none',
diplayForDown:'none',
)
render()
return(
<div className="container">
<div className="CenterCon">
<div contentEditable="true" onMouseUp=this.triggerAlltime onMouseDown=this.triggerAlltime onKeyUp=this.triggerAlltime onKeyDown=this.triggerAlltime className="Edithis" >
<p>Test</p>
</div>
</div>
<div style=top: this.state.top, bottom: this.state.bottom, left:this.state.left, right:this.state.right, display: this.state.display className="Toggle">
<ul>
<li>B</li>
<li>U</li>
<li>H</li>
<li>"</li>
</ul>
<div className="triangle">
</div>
</div>
/*DownWard Toggle*/
<div style=top: this.state.top, bottom: this.state.bottom, left: this.state.left, right: this.state.right, display: this.state.diplayForDown className="ToggleForDownWardSelection">
<div className="triangle-bottom" />
<ul>
<li>B</li>
<li>U</li>
<li>H</li>
<li>li</li>
</ul>
</div>
</div>
)
render(<App/>,document.getElementById('app'));
【问题讨论】：
你在用什么浏览器，因为这个小提琴在两个方向上都正确地为我添加了切换 div。jsfiddle.net/vCwwN/2 - 在 GC 和 FF 中对我有用 它会起作用。但是试试看选择内容的最后一行看看如果它起作用会发生什么请张贴截图@Zze @Alex.S 对您的回答的评论是正确的。我没有看到这个问题，因为我不必滚动到最后一段。很高兴你找到了解决办法。 【参考方案1】：最后我找到了答案，我修复了它对 contentEditable div 应用简单样式 它就像一个魅力一样工作。我不知道它为什么工作但我怀疑 窗口API
<div contentEditable="true" style=height:'100vh',overflow:'auto' onMouseUp=this.triggerAlltime onMouseDown=this.triggerAlltime onKeyUp=this.triggerAlltime onKeyDown=this.triggerAlltime className="Edithis" >
<p>Test</p>
</div>
【讨论】：
问题在于#pointer 设置为绝对位置，但是当内容较长且可滚动时，top 距离是从窗口顶部而不是内容顶部计算的。添加height: 100vh 可以解决这个问题，但在某些情况下您可能会看到两个滚动条。另一种方法是将window.pageYOffset添加到指针div的top中。这里是demo【参考方案2】：
问题在于#pointer 设置为绝对位置，但是当内容较长且可滚动时，顶部距离是从窗口顶部而不是内容顶部计算的。
添加height: 100vh 可以解决这个问题，但在某些情况下您可能会看到两个滚动条。
另一种方法是在计算指针div的top时加上window.pageYOffset。
if (backwards)
$('#pointer').css(top: rects[0].top + window.pageYOffset + 10, left: rects[0].left - 10).show();
else
$('#pointer').css(top: rects[n].top + window.pageYOffset + 10, left: rects[n].right).show();
这里是DEMO
【讨论】：
【参考方案3】：const isBackwards = () =>
const selection = window.getSelection();
let range = document.createRange();
range.setStart(selection.anchorNode, selection.anchorOffset);
range.setEnd(selection.focusNode, selection.focusOffset);
let backwards = range.collapsed;
range.detach();
return backwards;
【讨论】：
【参考方案4】：没有办法做到这一点。可能您可以检查鼠标按下和取消按下事件位置并确定初始/结束位置以确定它是向前还是向后选择。
【讨论】：
那是个好主意，你能举个例子来说明我的问题吗 我试过了，但有点混乱。你能把代码贴出来以上是关于如何在javascript中向前或向后查找用户选择天气？的主要内容，如果未能解决你的问题，请参考以下文章