Geek asks and answers

Building a text field using formatting controls - how to get selected text

Just for fun, I want to create simple text formatting tools for a text field. For starters, I want high-light text to be added to the textarea text if it should be bold (like the textovera stackoverflow editor). I wrote the following code, which works most of the time, but it has an error, which I will talk about in the near future.

<html>
<head>
<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script type="text/javascript" language="javascript">
var tmpText = '';
$(document).ready(function(){
        tmpText = '';
        $('#btn_bold').click(function(){bold(tmpText);});
        $('textarea').bind('mouseup', function(){
                  tmpText = '';
                  if(window.getSelection){
                    tmpText = window.getSelection().toString();
                  }else if(document.getSelection){
                    tmpText = document.getSelection().toString();
                  }else if(document.selection){
                    tmpText = document.selection.createRange().text;
                  }
        });
});

function bold(str)
{
        $('textarea').val($('textarea').val().replace(str,'**'+str+'**'));
}
</script>
</head>
<body>
<button type="button" id="btn_bold">bold it</button>
<textarea>AA</textarea>
</body>
</html>

, A , **A**A. A , **A**A A**A**, $('textarea').val($('textarea').val().replace(str,'**'+str+'**')); , A .

?

+3
4

jQuery, , script, , "".

<html>
<head>
<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script type="text/javascript" language="javascript" src="http://rangyinputs.googlecode.com/files/textinputs_jquery.js"></script>
<script type="text/javascript" language="javascript">

$(document).ready(function() {

        $('textarea').bind('mouseup',function() { $(this).replaceSelectedText('hello');});
});
</script>
</head>
<body>
<textarea style="width:300px; height:300px;">
AAA
</textarea>
</body>
</html>

, , , , , , . , .

+2

, :

el = document.getElementById('texty');
  if (el.setSelectionRange) {

     el.value = el.value.substring(0,el.selectionStart) + "**" + el.value.substring(el.selectionStart,el.selectionEnd) + "**" + el.value.substring(el.selectionEnd,el.value.length);

  }
  else if(document.selection.createRange()) {
      document.selection.createRange().text = "**" + document.selection.createRange().text + "**"; 
  }

, .

0
 <head>
 <script type="text/javascript">
    function formatText(el,tagstart,tagend) {
      if (el.setSelectionRange) {
        el.value = el.value.substring(0,el.selectionStart) + tagstart +
        el.value.substring(el.selectionStart,el.selectionEnd) + tagend +
        el.value.substring(el.selectionEnd,el.value.length)
      } else {
        // IE code 
        var selectedText = document.selection.createRange().text;
        var tag="b"
        if (selectedText != "") {
          var newText = "<" + tag + ">" + selectedText + "</" + tag + ">";
          document.selection.createRange().text = newText;
        }
      }
    }
</head>
<body>
  <p> <textarea rows="30" cols="59" name="Write-my-life-moments" 
       id="write-my-life- moments"></textarea> </p>

  <input type="button" value="BOLD"  
     onclick="formatText(document.getElementById('write-my-life-moments'), 
     '<b>','</b>')" />
</body>

This code works for FF, IE (6)>, Opera 9>, Safari. I tested it in these browsers. not on old ones. Therefore, please check this on older browsers. I don’t get the time to check it on old browsers (it doesn’t show my tag for opening a text area, I don’t know, so please dd. write-my-life-moments . name of the text area) `

0
source

More articles:


All Articles