如何像Bootstrap中的堆栈溢出标记一样在输入中制作徽章

qvsjd97n  于 2023-08-01  发布在  Bootstrap
关注(0)|答案(2)|浏览(136)

x1c 0d1x的数据
我想要一个输入/文本区域,可以允许用户添加引导badges。一个新的badge将被添加当用户按空格键后一些文本,就像SO标签字段(请参阅截图)。每个badge都必须包含一个x图标,当按下该图标时,将删除特定的badge。如何通过bootstrap实现这一点?

uqxowvwt

uqxowvwt1#

从下面的github链接ng-tags-input.minng-tags-input下载CSS文件,并创建一个控制器,如下所示。

> <body ng-controller="MainCtrl">
>     <tags-input ng-model="tags"></tags-input>
>     <p>Model: {{tags}}</p>   </body>

字符串
在App.js中添加以下内容

app.controller('MainCtrl', function($scope, $http) {
  $scope.tags = [
    { text: 'Tag1' },
    { text: 'Tag2' },
    { text: 'Tag3' }
  ];
});


来源:Demo

8aqjt8rx

8aqjt8rx2#

使用React来这里。最佳解决方案:https://www.npmjs.com/package/react-tagsinput
侧提示:默认情况下,当您点击EnterTab时,会添加标签。
如果您需要在“空格键”上添加标签,只需将addKeys={[32]}添加到TagsInput,如下所示:

<TagsInput
      onChange={onChange}
      value={tags}
      addKeys={[32]}
    />

字符串

相关问题