Question

`如何让bbcode输入文本框，例如：
像这样javascript to allow click image to input value like this Click For Demo

我使用此代码来理解但不起作用

<h2>BB Code And Smiley</h2><input type="text" id="f1" value="[a] [/a]"/>
<input type="image" id="f2" value="[b] [/b]" on click="document.getElementById('f2').value = document.getElementById('f1'). value+="document.getElementById('f1').value"><img src="bold.png"/></input><b r/>
<input type="text" id="f1" name="mess" value="'.htmlentities($_POST['mess']).'"/><br/>
<script>

`

Answer 1

请尝试以下JSFiddle：JSFiddle，否则;这是源代码：

<div id="editor">
  <ul id="buttons">
    <li><a href="javascript:void(0);" onclick="javascript:bbcoder('B')">B</a></li>
    <li><a href="javascript:void(0);" onclick="javascript:bbcoder('U')"><u>U</u></a></li>
    <li><a href="javascript:void(0);" onclick="javascript:bbcoder('I')">I</a></li>
    <li><a href="javascript:void(0);" onclick="javascript:bbcoder('Q')">""</a></li>
  </ul>
  <form id="editor-form" action="" method="post">
    <div>
      <textarea id="blog_body" name="blog_body" rows="15" cols="20" placeholder="Use editor buttons on selected text">This is a sample text, select some word and click on the links provided above to see the demo.</textarea>
    </div>
    <p>
      <input type="submit" value="Save">
    </p>
  </form>
</div>

<script>
function bbcoder(code) {
  try {
    var old = "";
    var textarea = document.getElementsByName("blog_body")[0];
    var value = textarea.value;
    var startPos = textarea.selectionStart;
    var endPos = textarea.selectionEnd;
    var selectedText = value.substring(startPos, endPos);

    switch (code) {
      case 'B':
        bbbold(textarea, value, startPos, endPos, selectedText);
        break;
      case 'U':
        bbunder(textarea, value, startPos, endPos, selectedText);
        break;
      case 'I':
        bbitalic(textarea, value, startPos, endPos, selectedText);
        break;
      case 'Q':
        bbquote(textarea, value, startPos, endPos, selectedText);
        break;
      default:
        alert('Invalid argument');
        break;
    }
  } catch (e) {
    alert(e.toString());
  }

}

function bbbold(textarea, value, startPos, endPos, selectedText) {
  textarea.value = value.replaceBetween(startPos, endPos, "[b]" + selectedText + "[/b]");
}

function bbitalic(textarea, value, startPos, endPos, selectedText) {
  textarea.value = value.replaceBetween(startPos, endPos, "[i]" + selectedText + "[/i]");

}

function bbunder(textarea, value, startPos, endPos, selectedText) {
  textarea.value = value.replaceBetween(startPos, endPos, "[u]" + selectedText + "[/u]");
}

function bbquote(textarea, value, startPos, endPos, selectedText) {
  textarea.value = value.replaceBetween(startPos, endPos, "[quote]" + selectedText + "[/quote]");
}


//http://stackoverflow.com/questions/14880229/how-to-replace-a-substring-between-two-indices
String.prototype.replaceBetween = function(start, end, what) {
  return this.substring(0, start) + what + this.substring(end);
};
</script>

如何使用可点击的值输入文本框使用javascript

1 个答案: