时间戳

首页 > 解决方案 > 如何通过此代码使用文本表单而不是可编辑的 div

javascript - 如何通过此代码使用文本表单而不是可编辑的 div

问题描述

编辑：由于评论中的一些帮助，我能够使下面的代码正常工作，但它对所有内容都有效，而不是突出显示的文本。

$(".boldtrigger").click(function() {$(".text").toggleClass("bold");});
$(".italictrigger").click(function() {$(".text").toggleClass("italic");});
$(".underlinetrigger").click(function() {$(".text").toggleClass("underline");});
.bold { font-weight: bold;}
.italic {font-style: italic;}
.underline {text-decoration: underline;}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
</head>

<body>
<a href="#" class="boldtrigger">Bold</a> <a href="#" class="italictrigger">italic</a> <a href="#" class="underlinetrigger">underline</a>
<textarea class="text">Here is the text.</textarea>
</body>
</html>

是否可以将此 div 改为 textarea 框？它目前工作正常，但在提交表单时无法满足我的需求。如何让它工作？

$(document).ready(function() {$('#jBold').click(function() {document.execCommand('bold');}).find('#fake_textarea').removeAttr('disabled').trigger('focus');});
$(document).ready(function() {$('#jUnderline').click(function() {document.execCommand('underline');}).find('#fake_textarea').removeAttr('disabled').trigger('focus');});
$(document).ready(function() {$('#jNewline').click(function() {document.execCommand('insertHtml', false, '<br>');}).find('#fake_textarea').removeAttr('disabled').trigger('focus');})
        #fake_textarea {
  width: 100%;
  border: 1px solid red;
  height: auto;
  min-height: 200px;
}

button {
  font-weigth: bold;
}
span {display: table;}
<!DOCTYPE html>
<html>
<head>
    <script src="http://stacksnippets.net/scripts/snippet-javascript-console.min.js?v=1"></script>
    </head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="jBold" type="button"><b>B</b></button> <button id="jUnderline" type="button"><u>U</u></button> <button id="jNewline" type="button">New Line</button>
<div id='fake_textarea' contenteditable='true'></div>
</body>
</html>

标签： javascripthtmlcsstextarea

解决方案

谢谢你的帮助，但实际上我在这个旧的 BBcode 页面上看到了一篇关于如何解决这个问题的旧帖子，并且代码在通过表单发送时保留，结果显示为 html。如果您弄乱了代码，还可以添加一个NextLine按钮，非常有帮助。PS：javascript 在这个的标题中。

function formatText(el,tag){
var selectedText=document.selection?document.selection.createRange().text:el.value.substring(el.selectionStart,el.selectionEnd);
var newText='<'+tag+'>'+selectedText+'</'+tag+'>';
if(document.selection){//IE
document.selection.createRange().text=newText;
}
else{//Moz
el.value=el.value.substring(0,el.selectionStart)+newText+el.value.substring(el.selectionEnd,el.value.length);
}
}
<form name="myForm">
<textarea name="myTextarea" rows = "12" cols = "50">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea><br>
<input type="button" value="Bold" onclick="formatText (myTextarea,'b');" />
<input type="button" value="Italic" onclick="formatText (myTextarea,'i');" />
<input type="button" value="Underline" onclick="formatText (myTextarea,'u');" />
</form>

推荐阅读