Twitter Bootstrap标签输入在onfocus时不会删除占位符

Posted 2023-03-05

【中文标题】Twitter Bootstrap标签输入在onfocus时不会删除占位符

【英文标题】：Twitter Bootstrap tags input doesn't remove placeholder when onfocus

【发布时间】：2015-02-14 16:51:31

【问题描述】：

从昨天开始我就一直在为这个问题摸不着头脑，我无法解决。我是 Twitter Bootstrap 的新手，直到昨天一切都很顺利。

我正在使用最新的 JQuery v1.11.1 和 Twitter Bootstrap v3.3.1。昨天我下载了 Bootstrap Tags Input，从这里：http://timschlechter.github.io/bootstrap-tagsinput/examples/

该插件有效，我已经更改了 CSS 样式以匹配我的页面布局，但我遇到的问题是占位符属性在焦点上不会消失。如果我输入一个标签并添加一个逗号值，占位符将显示，直到我开始输入，然后它将再次消失。

我尝试使用 JQuery onfocus 函数在 onfocus 时删除该属性，但它没有做任何事情。我想要实现的是，当 onfocus 时，占位符不会在该点显示，甚至在模糊时也不会显示。

我的输入框如下所示：

<input type="text" name="customer_tags" id="customer_tags" value="" placeholder="Enter you tags" data-role="tagsinput" required />

【问题讨论】：

您在哪个浏览器中看到此行为？

能给个链接或者jsbin/codepen等吗？ “在我开始输入之前显示”听起来就像它应该的那样。

您好，Firefox 34.0.5 是最新版本

@atmd 这里是我的代码brightlet.kollkolen.com/tagsinput.html 的链接，您可以在输入逗号时看到占位符再次显示。

如果您不想在按逗号时输入完整的标签，您应该尝试删除插件上的某些内容，可能只有“confirmKeys: [13]”。 “逗号”确认您的输入已完成。

【参考方案1】：

在我的情况下，经过一些修改，它工作正常。

$('#txtTimeSlot').on('change', function () 
        var len = $(this).tagsinput('items').length;
        if (len > 0) 

            var $input = $($(this).prev().children('input').get(0));
            $input.attr('placeholder', '');
         else 

            var $input = $($(this).prev().children('input').get(0));
            $input.attr('placeholder', $(this).attr('placeholder'));
        
    );

【参考方案2】：

以下代码适用于我的情况：

    <input type="text" name="add_image_tags" id="add_image_tags" data-role="tagsinput" 
class="form-control" placeholder="Enter tags" data-placeholder="Enter tags" value="" />

handlePlaceHolder(); //Call during page load

function handlePlaceHolder()
    
    if($('#add_image_tags').val())
    
        $('.bootstrap-tagsinput input').attr('placeholder', '');
    
    else
    
        $('.bootstrap-tagsinput input').attr('placeholder',$('#add_image_tags').attr('data-placeholder'));
    


$('#add_image_tags').on('itemRemoved', function(event) 
  // event.item: contains the item
  handlePlaceHolder();
);

$('#add_image_tags').on('itemAdded', function(event) 
  // event.item: contains the item
  handlePlaceHolder();
);

【参考方案3】：

我能够使用 jquery 进行快速修复。我想要的行为应该做两件事：

1) 在我集中注意力并开始输入后，在页面上删除占位符。所以我会在keyup上运行它。

$(document).on('keyup', '.bootstrap-tagsinput input', function()
    $(this).attr('placeholder', '')
)

2) 如果输入中已经有标签，那么我显然不需要占位符。我在页面加载时运行它。

$('.labels').each(function()
    var len = $(this).tagsinput('items');
    if(len)
        var $input = $($(this).prev().children('input').get(0));
        $input.attr('placeholder', '');
    
)

【参考方案4】：

两年后，但我找到了解决此问题的方法。首先，如果你检查 DOM ，你会看到一个新的输入文本，它继承了我们的占位符文本，但没有前面大家提到的额外功能 onblur, onfocus。

<div class="bootstrap-tagsinput">
<input placeholder="text inherited from our input" size="23" type="text">
</div>

然后，要解决此问题，您必须创建一个 jquery 函数来指向该输入。像这样：

$('.bootstrap-tagsinput input').blur(function()jQuery(this).attr('placeholder', ''))

指向具有类“bootstrap-tagsinput”的元素，然后指向内部的“输入”对象。如果您愿意，也可以添加 .focus 函数。在我的情况下，当用户离开对象并且输入标签在没有占位符的情况下看起来很干净时工作。

【参考方案5】：

这就是插件的行为方式。一旦你点击“输入”或“逗号”，它就会创建一个跨度标签（见附图）并将输入向右移动。所以现在输入没有任何价值，应该显示占位符。

In their docs it's mentioned[搜索confirmKeys]

在输入时添加标签的键码数组。 （默认：[13, 188]，即 ENTER 和逗号）

更改确认键以在您键入 comma 时删除标签的创建

编辑：

在您的site 上，我在控制台中尝试了以下方法，它奏效了。

$('input').tagsinput(
  confirmKeys: [13]
);

【讨论】：

您好，我已经尝试过了，但即使在输入逗号后它仍然是一样的:(

在您的网站上，在控制台中，我在控制台中尝试了这个$('input').tagsinput(confirmKeys: [13]);，它成功了。你确定你试过了吗？

【参考方案6】：

试试这个，我希望它有效：

<form>
  <div>
    <label for="name" class="left-label">Your Name</label>
    <input type="text" class="example-two" placeholder="Enter you tags" id="name" name="name">
  </div>
</form>

CSS：

[placeholder]:focus::-webkit-input-placeholder 
  transition: opacity 0.5s 0.5s ease; 
  opacity: 0;


.example-two:focus::-webkit-input-placeholder 
  transition: text-indent 0.5s 0.5s ease; 
  text-indent: -100%;
  opacity: 1;


body 


form 
  display: inline-block;
  margin-top: 20px;

label 
  display: block;
  text-align: left;
  font: bold 0.8em Sans-Serif;
  text-transform: uppercase;

.left-label 
  float: left;
  padding: 8px 5px 0 0;

input[type=text] 
  padding: 5px;
  text-indent: 0;

form div 
  margin: 20px;
  clear: both;
  text-align: left;

JSFiddle

编辑： 也在 IE 上工作： JSFiddle

【讨论】：

嗨@Joci93 这是我的代码brightlet.kollkolen.com/tagsinput.html 的链接，正如您在键入逗号时看到的那样，占位符再次显示。

@Cam 尝试：小车，但工作

谢谢，但它不起作用。尝试在输入中添加 data-role="tagsinput" 属性，因为它需要与 Bootstrap 标签输入插件一起使用

也许：

对不起，它不起作用，而且看起来很乱。如果你明白我的意思，我喜欢干净的代码

【参考方案7】：

HTML5 placeholder 属性不会在您关注input 标签时消失...它只会在您开始输入时消失。这是默认行为。

你也可以看到@W3Schools...

【讨论】：

我建议 MDN 文档中的输入（包括占位符）而不是 w3schools developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

您好，感谢您的回复，我理解这一点，但行为不一样。占位符将在逗号后显示，直到您再次开始输入。我会安排一个指向我的代码的链接