51

StackOverflow 如何创建它的标签系统。它如何格式化文本区域中的html？

我只是不知道从哪里开始。如果有人可以指导我，那么我可以知道该采取什么方向，这样我就可以编写一些有人可以检查的代码。

像这样：

在此处输入图像描述

编辑：基本上，当我按空格键时，如何在 div 内部添加一个新元素/div？

4

5 回答 5

28

Bootstrap 解决方案呢？

你可以试试这个：

HTML 代码：

<input type="text" value="html,input,tag" data-role="tagsinput"></input>

对于 CSS，调用这两个文件：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.css">

对于 Javascript，调用这两个文件：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>

代码将生成以下结果：

在此处输入图像描述

看看这个。

于 2016-04-01T07:57:51.587 回答
23

我会做的是：

  • 创建一个带边框的主 DIV（比如这里的边框 1px solid #000）
  • 之后，在这个 DIV 中，我将创建另一个 DIV (float: left;)、另一个 DIV (float: right) 和右 div 内的一个输入。

当您在输入中写入并假设您选择 HTML 时，它会在左侧 DIV 中创建一个跨度并减小右侧 div 的宽度以匹配剩余大小。当然，在您的跨度内有带有删除符号的文本 HTML。

您可以使用 jQuery 轻松完成。

例子：

<div id="master_div">
    <div id="categories">

    </div>
    <div id="input">
        <input type="text" value="" />
    </div>
</div>

你写了一些 jQuery / JS

于 2012-05-31T18:59:48.137 回答
7

它没有。如果您查看 DOM，您最初看到的只是一个输入框。添加标签后，它会在带有该标签的输入框之前插入一个<span>标签，并且它是删除图标。输入框现在位于该<span>标签的右侧。当您单击标签进行编辑时，它会在其位置放置一个文本框，以便您进行编辑。所有这一切都是用 Javascript 完成的，并且有一些 JQuery 插件可以帮助您做到这一点。这是来自快速谷歌搜索的一个：http: //xoxco.com/projects/code/tagsinput/

就样式而言，<span>元素可以有任何你想要的 CSS。

于 2012-05-31T19:01:22.740 回答
5 

var es = document.querySelectorAll('.input-categories');
for (var i = 0; i < es.length; i++) {
  es[i]._list = es[i].querySelector('ul');
  es[i]._input = es[i].querySelector('input');
  es[i]._input._icategories = es[i];
  es[i].onkeydown = function(e){
    var e = event || e;
    if(e.keyCode == 13) {
      var c = e.target._icategories;
      var li = document.createElement('li');
      li.innerHTML = c._input.value;
      c._list.appendChild(li);
      c._input.value = '';
      e.preventDefault();
    }
  }
}
*{
  margin: 0px;
  padding: 0px;
}

.input-categories{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  border: 1px solid black;
}

.input-categories ul{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  list-style-type: none;
  flex-wrap: wrap;
}

.input-categories li{
  border: 1px solid black;
  border-radius: 2px;
  padding: 1px;
  margin: 1px;
}
.input-categories input{
  flex: 1 1 auto;
  align-self: flex-start;
}
<div class="input-categories">
  <ul>
    <li>moscow</li>
    <li>new york</li>
  </ul>
  <input type="text"/>
</div>

<div class="input-categories">
  <ul>
    <li>CSS</li>
    <li>PHP</li>
  </ul>
  <input type="text"/>
</div>

于 2018-01-07T14:47:32.340 回答
0

反应功能组件

const AutoList=()=>{
const [currentTagText, setCurrentTagText] = useState("");
const [tags, setTags] = useState(["javascript"]);

const handleTag = (e) => {
   setCurrentTagText(e.target.value);
   if (e.keyCode == 13 && currentTagText) {
    setTags((prevTags) => [...prevTags, currentTagText]);
    setCurrentTagText("");
   } else if (e.keyCode == 32 && currentTagText) {
    setTags((prevTags) => [...prevTags, currentTagText]);
    setCurrentTagText("");
   }
};
const removeTag = (index) => {
   const newTagArray = tags;
   newTagArray.splice(index, 1);
   setTags([...newTagArray]);
};

return (

  <div className="masterStackDiv">
          <div
            className="stackTags"
            style={{ display: tags.length > 0 ? "flex" : "none" }}
          >
            {tags.map((tag) => {
              return (
              <div className="stackTag">
                 <button
                    onClick={() => removeTag(index)}
                    className="tagCloseBtn"
                  >
                    x
                  </button>
                  #{tag}
              </div>
               )
            })}
          </div>
          <div className="stackInput">
            <input
              type="text"
              onKeyDown={handleTag}
              onChange={handleTag}
              value={currentTagText}
            />
          </div>
        </div>
 )

}

CSS：-

.masterStackDiv {
  width: auto;
  background-color: transparent;
  border: none;
  display: flex;
  align-items: center;
}
.stackInput input[type="text"] {
  border: none;
  background-color: transparent;
  color: white;
  font-family: "Segoe UI";
  font-size: 0.8em;
  float: right;
  margin-left: 5px;
  width: auto;
  border-bottom: 2px solid white;
}

.stackTag {
  background-color: #707070;
  color: white;
  height: 20px;
  width: auto;
  border-radius: 10px;
  font-size: 0.7em;
  padding: 5px;
  margin: 3px;
  display: flex;
  align-items: center;
}

.stackTags {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: auto;
}
.tagCloseBtn {
  border: none;
  background-color: transparent;
  border-radius: 5px;
}
.tagCloseBtn:hover {
  background-color: white;
  cursor: pointer;
}


const {useState} = React
 
const StackTag=()=>{
 const [currentTagText, setCurrentTagText] = useState("");
 const [tags, setTags] = useState(["javascript"]);
 
 const handleTag = (e) => {
    setCurrentTagText(e.target.value);
    if (e.keyCode == 13 && currentTagText) {
      setTags((prevTags) => [...prevTags, currentTagText]);
      setCurrentTagText("");
    } else if (e.keyCode == 32 && currentTagText) {
      setTags((prevTags) => [...prevTags, currentTagText]);
      setCurrentTagText("");
    }
  };
  
  const removeTag = (index) => {
    const newTagArray = tags;
    newTagArray.splice(index, 1);
    setTags([...newTagArray]);
  };

  return (
       <div className="masterStackDiv">
              <div
                className="stackTags"
                style={{ display: tags.length > 0 ? "flex":"none"}} 
              >
                {tags.map((tag, index) => {
                  return (
                    <div className="stackTag" key={index}>
                      <button
                        onClick={() => removeTag(index)}
                        className="tagCloseBtn"
                      >
                        x
                      </button>
                      #{tag}
                    </div>
                  );
                })}
              </div>
              <div className="stackInput">
                <input
                  type="text"
                  onKeyDown={handleTag}
                  onChange={handleTag}
                  value={currentTagText}
                />
              </div>
            </div>
            )
       }
ReactDOM.render(<StackTag/>,document.getElementById("react"))
.masterStackDiv {
  width: auto;
  background-color: transparent;
  border: none;
  display: flex;
  align-items: center;
}
.stackInput input[type="text"] {
  border: none;
  background-color: transparent;
  color: black;
  font-family: "Segoe UI";
  font-size: 0.8em;
  float: right;
  margin-left: 5px;
  width: auto;
  border-bottom: 2px solid black;
}

.stackTag {
  background-color: #707070;
  color: white;
  height: 20px;
  width: auto;
  border-radius: 10px;
  font-size: 0.7em;
  padding: 5px;
  margin: 3px;
  display: flex;
  align-items: center;
}

.stackTags {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: auto;
}
.tagCloseBtn {
  border: none;
  background-color: transparent;
  border-radius: 5px;
}
.tagCloseBtn:hover {
  background-color: white;
  cursor: pointer;
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
</head>
<body>
<div id="react"></div>
</body>
</html>

于 2020-05-13T18:34:41.747 回答