Wie, um ausgewählten text Fett/Kursiv/Unterstrichen in javascript?

Ich versuche zu arbeiten auf einer Webseite, die Benutzern erlaubt zu schreiben Ihre eigenen Notizen für ein Schulprojekt, und meine Idee war, dass Sie Fett und/oder Kursiv darstellen/unterstreichen Ihren text über die Tasten. Wie jetzt, die Tasten sind zu arbeiten, aber Sie Fett und/oder Kursiv darstellen und/oder Unterstrichen, alles im text-Bereich. Stattdessen möchte ich es auf Arbeit in der Weise, dass nur der text, den Sie markieren, wird Fett/Kursiv/Unterstrichen.
Ich würde auch gerne wissen, wie man es so machen, dass wenn Sie klicken Sie auf die Schaltfläche Fett, text, Sie geben ab dann kommen aus Fett, und wenn Sie klicken Sie erneut, den text, der eingegeben wird, ab dann kommt heraus normalen.

<script type="text/javascript">
function boldText(){
    var target = document.getElementById("TextArea");
    if( target.style.fontWeight == "bolder" ) {
        target.style.fontWeight = "normal";
    } else {
        target.style.fontWeight = "bolder";
    }
}



function italicText(){
    var target = document.getElementById("TextArea");
    if( target.style.fontStyle == "italic" ) {
        target.style.fontStyle = "normal";
    } else {
        target.style.fontStyle = "italic";
    }
}

function underlineText(){
    var target = document.getElementById("TextArea");
    if( target.style.textDecoration == "underline" ) {
        target.style.textDecoration = "none";
    } else {
        target.style.textDecoration = "underline";
    }
}
</script>
InformationsquelleAutor cosmo | 2016-07-06
  1. 5

    Können Sie execCommand(). Diese API war für die Entwicklung von text-Editoren. Die 3-Tasten nutzen, die sehr vielseitig execCommand() und das schreiben von element ist ein einfaches div-Element aktiviert, die mit dem Attribut contenteditable.

    SNIPPET

    HTML:

    <!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <style>
    body {
      font: 400 16px/1.4 'serif';
      }
    #editor1 {
      border: 3px inset grey;
      height: 100px;
      width: 381px;
      margin: 10px auto 0;
     }
    fieldset {
      margin: 2px auto 15px;
      width: 358px;
    }
    button {
      width: 5ex;
      text-align: center;
      padding: 1px 3px;
    }
  </style>
</head>

<body>

  <div id="editor1" contenteditable="true">
     The quick brown fox jumped over the lazy dog.
  </div>
  <fieldset>
    <button class="fontStyle" onclick="document.execCommand('italic',false,null);" title="Italicize Highlighted Text"><i>I</i>
    </button>
    <button class="fontStyle" onclick="document.execCommand( 'bold',false,null);" title="Bold Highlighted Text"><b>B</b>
    </button>
    <button class="fontStyle" onclick="document.execCommand( 'underline',false,null);"><u>U</u>
    </button>
  </fieldset>

    InformationsquelleAutor zer00ne
  2. 1

    Textarea erlaubt keine solche Dinge. Ich schlage vor, Sie verwenden so etwas wie ckeditor. Es wird der job für Sie tun ordentlich. Aber wenn Sie immer noch wollen, es selbst zu tun, müssen Sie eine div mit contenteditable tag.

    Glück !

    InformationsquelleAutor kawadhiya21
  3. 0

    Mit textarea Sie nicht erreichen können, verwenden Sie divs statt, so können Sie etwas wie das hier tun:

    JS:

    $(document).ready(function(){
$('.boldText').click(function(){
   $('.container').toggleClass("bold");
});
$('.italicText').click(function(){
  $('.container').toggleClass("italic");
});
$('.underlineText').click(function(){
  $('.container').toggleClass("underline");
});



});

    CSS:

    div.container {
    width: 300px;
    height: 100px;
    border: 1px solid #ccc;
    padding: 5px;
}
.bold{
  font-weight:bold;
}
.italic{
  font-style :italic;
}
.underline{
 text-decoration: underline;
}

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container" contentEditable></div><br/>
<input type="button" class="boldText" value="Bold">
<input type="button" class="italicText" value="Italic">
<input type="button" class="underlineText" value="Underline">

    InformationsquelleAutor Amani Ben Azzouz
Schreibe einen Kommentar