選択したdivに入るための選択テキストについてミニ・質問が1つあります。選択したテキスト・ボックスに入る
このデモはcodepen.ioから作成しました。
このデモでは、青いボタンとテキストがテキストエリアに表示されています。私はこのテキストを選択を選択したいと思います。青いボタンをクリックした後、選択されたテキストはこの<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>
クリックするとaddClass javascript属性が使用されます – Keith