CODEWITHSUNDEEP
javascript
user2121627
user2121627

Reputation: 41

Replace Form Input Selected Text

I have an old asp page that had a small image that could be clicked to change some selected text in a form text input box to italics using javascript. This was working fine for many years, but a user just informed me that it no longer seems to be working. In looking around for a solution, it seems the createRange() function is no longer supported by many current browsers, causing the browser to throw an error, and getSelection() should now be used instead.

The old script is listed below.

<script type="text/javascript">
var j;  // this is the currently selected form element i.e., line number

function getelement_num(k) {
    j = k;
    return;
}
function format_sel(v) {
  var str = document.selection.createRange().text;
  document.form1.strMessage.focus();
  var sel = document.selection.createRange();
  sel.text = "[" + v + "]" + str + "[/" + v + "]";
  return;
}
</script>

I have modified the format_sel function as follows:

function format_sel(v) {
    var str = window.getSelection().toString;
    document.FrontPage_Form2.elements[j].focus();
    var sel = window.getSelection().toString;
    sel.text = "<" + v + ">" + str + "</" + v + ">";
return;
}

So, the getSelection() seems to be working fine. If I alert(sel), it returns the selected text. However, the sel.text portion is not replacing the selected text in the input field of the form.

My question is, how should I modify the code above so that the selected text in the form input field will be replaced with the modified text as found in sel.text?

Pertinent HTML code (with only 1 of 9 form fields shown for brevity):

<a title="Select text in fields below and then click this button to add Italics" href="#" onclick="format_sel('i');" ><img alt="Select text in fields below and then click this button to add Italics" border="0" src="images/italic.gif" width="21" height="19" align="middle" class="style33" /></a>

<input name="Title" id="Title" type="text" placeholder="Add Title" style="border: 1px solid #B5DB38; width: 250px" onfocus="lastFocus=this; getelement_num('0');" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" /></td>

I should note that I also have code that will insert special characters into the form as well, which is what the storeCaret code is for. That seems to work fine.

Many thanks for the assistance.

Upvotes: 1

Views: 416

Answers (2)

user2121627
user2121627

Reputation: 41

Ok, in searching around a little bit, I found some code that seems to work. I modified it slightly for my own purposes (see below), but the original code by Er. Anurag Jain can be found here: https://stackoverflow.com/a/11170137/2121627.

Many thanks as well to @user2121627 for their suggestions on amending and testing the code.

<script type="text/javascript">
var j;  // this is the currently selected form element i.e, line number

function getelement_num(k) {
    j = k;
    return;
}
function format_sel(v) {
    var elem = document.FrontPage_Form2.elements[j];
    var start = elem.selectionStart;
    var end = elem.selectionEnd;
    var len = elem.value.length;
    var sel_txt = elem.value.substring(start, end);

    if (sel_txt != "") {
        document.FrontPage_Form2.elements[j].focus();
        var replace = "<" + v + ">" + sel_txt + "</" + v + ">";
        elem.value = elem.value.substring(0, start) + replace + elem.value.substring(end, len);
    }
}
</script>

Here is a jsfiddle for those interested: https://jsfiddle.net/jwfetz/kzcywvnh/42/

Upvotes: 1

CRuizH
CRuizH

Reputation: 70

There seem to be two types of problem with this code.

The first one is that if you want to get the string value of the selection, you should use toString() instead of toString. Using the latter will give you a reference to the function toString instead of the returned value. I don't know what your alert function is calling, but it doesn't seem correct.

The second problem is that your sel variable is currently a function, and even if you did it correctly (using toString()) you would get a string which has no .text attribute. What you should be calling there is actually

var sel = window.getSelection();

So that you get a reference to the Html Element, which does have the .text attribute.

Upvotes: 1

Related Questions