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

【问题标题】：How to make a clickable value to enter a textbox use javascript如何使用 javascript 使可点击的值输入文本框
【发布时间】：2016-12-04 12:20:46
【问题描述】：

`我如何使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>

【问题讨论】：

你能在 jsfiddle 上发一个例子吗？
php 在没有打开标签的情况下无法工作，并且在您的示例中还需要关闭标签。 html属性“on click”不存在，你的意思是“onClick”？输入元素的值不能像你那样写。 [a][/a] 怎么回事？你的点击属性的javascript代码是完全错误的
是的，我的 js 很差，我需要帮助，请帮助我，谢谢
如果你能帮我解决我想要的问题，如果他们点击像 B、I、BR 这样的图像，将 onClick 的元素值带到文本区域/输入框，我会很高兴，请帮助我

标签： javascript php html

【解决方案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>

【讨论】：

干得好@布拉德利霍奇斯我很高兴我认为这是我需要的正确的东西
工作正常，但我怎么能用它来选择/下拉值？？？帮助我please_se我的javascript很差
请大家帮忙看看如何通过onclick向上面的代码添加选择/下拉值？？？
抱歉，我这两天一直不舒服。我不知道您将如何在下拉菜单中运行此代码，除了额外的 javascript 来定义点击操作是什么。试试这个：stackoverflow.com/a/5323626/4365209