Question

我有一个关于选择文字的迷你问题，以进入选定的div。

我已经从codepen.io创建了这个演示。

在此演示中，您可以看到textarea中有一个蓝色按钮和文本。当我选择选择此文本时我想要。然后单击蓝色按钮，单击蓝色按钮后所选文本应如此<div class="selected">Select this text.</div>。

我该怎么做？在这方面，任何人都可以帮助我吗？

$(document).ready(function() {
  $("body").on("click", ".Bold", function() {
    // Code goes here...
  });
});

html,
body {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  font-family: helvetica, arial, sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  background-color: #fafafa;
}
.container {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 0px auto;
  margin-top: 30px;
}
.editor {
  float: left;
  width: 100%;
  padding: 30px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.editButtons {
  width: 100%;
  float: left;
  margin-bottom: 15px;
}
.Bold {
  padding: 5px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: blue;
  position: relative;
  max-width: 150px;
  text-align: center;
  color: #ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="editButtons">
    <div class="Bold">Add in Div</div>
  </div>
  <textarea class="editor" id="editor">Select this text. and click blue button. It should be add the following div tag like this:
    <div class="selected">Select this text.</div>
  </textarea>
</div>

Answer 1

我想你正在寻找这个：

$(document).ready(function() {
   $("#btnSelect").click(function() {
      var $area = $("textarea.editor");
      var area = $area.get()[0];
      var s = area.selectionStart;
      var e = area.selectionEnd;
      if (s == e) return;
      var text = $area.val();
      var before = s > 0 ? text.substr(0, s) : "";
      var selection = text.substr(s, e - s);
      var after = e < text.length - 1 ? text.substr(e) : "";
      
      selection = "<div id=\"selected\">" + selection + "</div>";
      $area.val(before + selection + after);
      return false;
   });
});

html,
body {
   width: 100%;
   height: 100%;
   padding: 0px;
   margin: 0px;
   font-family: helvetica, arial, sans-serif;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   background-color: #fafafa;
}

.container {
   position: relative;
   width: 100%;
   max-width: 500px;
   margin: 0px auto;
   margin-top: 30px;
}

.editor {
   float: left;
   width: 100%;
   padding: 30px;
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
}

.editButtons {
   width: 100%;
   float: left;
   margin-bottom: 15px;
}

.editButtons a {
   text-decoration: none
}

#btnSelect {
   padding: 5px;
   border-radius: 3px;
   -webkit-border-radius: 3px;
   background-color: blue;
   position: relative;
   max-width: 150px;
   text-align: center;
   color: #ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
   <div class="editButtons">
      <a href="" id="btnSelect">Select</a>
   </div>
   <textarea class="editor" id="editor">Select this text. and click blue button. It should be add the following div tag like this: <div class="selected">Select this text.</div> </textarea>
</div>

Answer 2

$(document).ready(function() {
    $("body").on("click",".Bold", function(){
        var textArea = $('#editor');
        var start = textArea[0].selectionStart;
        var finish = textArea[0].selectionEnd;
        var textValue = textArea.val();
        var modifiedText = '<div class="selected">' + textValue.substring(start, finish) + '</div>';
        var finalText = textArea.val().substring(0, start) + modifiedText + textArea.val().substring(finish, textValue.length);
        textArea.val(finalText);
    });
});

Answer 3

＆＃13;

$(document).ready(function() {
  $("body").on("click", ".Bold", function() {
    // Code goes here...
    $('.Bold').html('<div class="selected">Select this text.</div>')
  });
});

＆＃13;

html,
body {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  font-family: helvetica, arial, sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  background-color: #fafafa;
}
.container {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 0px auto;
  margin-top: 30px;
}
.editor {
  float: left;
  width: 100%;
  padding: 30px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.editButtons {
  width: 100%;
  float: left;
  margin-bottom: 15px;
}
.Bold {
  padding: 5px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: blue;
  position: relative;
  max-width: 150px;
  text-align: center;
  color: #ffffff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="editButtons">
    <div class="Bold">Add in Div</div>
  </div>
  <textarea class="editor" id="editor">Select this text. and click blue button. It should be add the following div tag like this:
    <div class="selected">Select this text.</div>
  </textarea>
</div>

＆＃13;

Answer 4

$(document).ready(function() {
  $("body").on("click", ".Bold", function() {
    // Code goes here...
    $(this).html('<div class="selected">Select this text.</div>')
  });
});

试试这个。

Answer 5

我想我很困惑。您是否要将一个名为selected的类添加到textarea？如果是这样，你就是这样做的。

$(document).ready(function() {
   $(".Bold").on("click", function(){
      $('textarea').addClass('selected');
   });
});

.selected {
   background: black;
   color: white;
}

Answer 6

试试这个 - 我想你想输出所选的文字？

＆＃13;

$("body").on("mousedown", ".Bold", function() {
  $('.container').append('<div class="selected">' + window.getSelection().toString() + '</div>');
  console.log('<div class="selected">' + window.getSelection().toString() + '</div>');
});

＆＃13;

html,
body {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  font-family: helvetica, arial, sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  background-color: #fafafa;
}
.container {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 0px auto;
  margin-top: 30px;
}
.editor {
  float: left;
  width: 100%;
  padding: 30px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.editButtons {
  width: 100%;
  float: left;
  margin-bottom: 15px;
}
.Bold {
  padding: 5px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: blue;
  position: relative;
  max-width: 150px;
  text-align: center;
  color: #ffffff;
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <div class="editButtons">
    <div class="Bold">Add in Div</div>
  </div>
  <textarea class="editor" id="editor">Select this text. and click blue button. It should be add the following div tag like this:
    <div class="selected">Select this text.</div>
  </textarea>
</div>

＆＃13;

Answer 7

我有另一种解决方案：

＆＃13;

function disp() {
  var text = document.getElementById("text");
  var t = text.value.substr(text.selectionStart, text.selectionEnd - text.selectionStart);
  alert(t);
}

＆＃13;

<TEXTAREA id="text">Hello, How are You?</TEXTAREA><BR>
<INPUT type="button" onclick="disp()" value="Select text and click here" />

＆＃13;

希望有所帮助

进入选定的文本div

7 个答案: