Question

当用户突出显示文字时，会弹出DIV，但如果用户点击页面上的任何位置，它会自动消失，这是我不想要的。此外，当我想要突出显示不同范围的文本时，我无法让div关闭然后重新打开。如果我突出显示一个文本范围，然后突出显示另一个范围或文本，则第一次打开的div将关闭而不会重新打开。

任何帮助都会很棒！下面的Liveweave：

http://liveweave.com/WBf1h4

HTML：

<body>
 <div class=" text">
    <p>Having been in the field, most recently in India, I have seen that access to safe water is just a few dollars away for many people. A small loan can create a pathway to a household water tap. Making access to capital ubiquitous and affordable for those living in poverty would go a long way towards eliminating water stress.</p>

    <p>Due to a combination of problems, including rapid population growth, constrained water supplies and high levels of poverty, countries such as India, Indonesia, Bangladesh and Nigeria will be hit the hardest by this trend. Resource-constrained water stress will be the norm for many countries in Asia, while finance-constrained water stress will be the norm for many countries in Africa. This is reflected in the fact that experts surveyed by the World Economic Forum expect Sub-Saharan Africa to be the most affected region, closely followed by Asia.</p>
  </div>
  <div class="dropdown" id="txtmen" style="display:none;">
    <div class="sendform">
    <form class="form-inline">
      <div class="form-group">
        <div class="input-group">
     <span class="input-group-addon">
        <i class="glyphicon glyphicon-user"></i>
    </span>
    <input type="contact" class="form-control" id="contact" placeholder="Contact" maxlength="30">
      </div>
      </div>
  <div class="form-group">
    <div class="input-group">
      <span class="input-group-addon">
        <i class="glyphicon glyphicon-envelope"></i>
    </span>
    <input type="message" class="form-control" 
          placeholder="Message" maxlength="40" required>
        </div>
      </div>
      <div class="form-group">
  <button type="submit" class="btn btn-primary btn-md">Send</button>
        </div>
</form>
      </div>
  </div>
</body>

jquery的：

function getSelected() {
    if (window.getSelection) {
        return window.getSelection();
    }
    else if (document.getSelection) {
        return document.getSelection();
    }
    else {
        var selection = document.selection && document.selection.createRange();
        if (selection.text) {
            return selection.text;
        }
        return false;
    }
    return false;
}

//if browser is mozilla
//add IE compatability too
var selection= getSelected();//sets selected text to var selection
function checkObj(){
    var range = selection.getRangeAt(0); //gets a range of the characters selected 
    var newNode = document.createElement('span');//maybe a span or div, try both
    newNode.setAttribute("class", "selectedText");
    range.surroundContents(newNode);
    var dropbutton= document.getElementById('txtmen');
    if(newNode.innerHTML.length > 0) {
        newNode.appendChild(dropbutton);
        }  
    if (window.getSelection) {
        window.getSelection().removeAllRanges();
        }
        else if (document.selection){ 
        document.selection.empty();
        }
}

function exitDropdown(){
   $(document).keyup(function(event) {
        if(event.which === 27) {
            $('.dropdown').toggle('hide');
            event.stopPropagation();
        }
});
}

function showDropdown(){
   $('.dropdown').toggle('show', function(e){
    document.getElementById('contact').focus();
  });
}

$(document).mouseup(function() {
    checkObj();
    showDropdown();
    exitDropdown();
});

Div没有正确使用Jquery / javascript关闭

0 个答案: