選択したテキスト・ボックスに入る

Question

選択した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>

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() { 
 
    // Code goes here... 
 
    $('.Bold').html('<div class="selected">Select this text.</div>') 
 
    }); 
 
});

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 3

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

これを試してみてください。

Answer 4

私は混乱していると思います。選択したクラスをテキストエリアに追加しますか？もしそうなら、これがあなたのやり方です。

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

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

Answer 5

はこれを試してみてください - 私はあなたが選択したテキストを出力したいと思いますか？

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

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; 
 
}

<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 6

私がしました。このような別の解決策：

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

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

はそれが役に立てば幸い

Answer 7

$(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); 
    }); 
});