Question

我正在尝试在输入文本字段中获取粗体特定文本。我不确定如何解决这个问题因为html代码没有在文本字段中解释，所以像<b>这样的东西都行不通。是否可以加粗一些文字？像bold（）这样的方法只在字符串周围添加<b>。

由于

Answer 1

这是一招。

INPUT字段位于SPAN上方。有一个函数示例，它将3个第一个字符放在粗体中。使用旧浏览器可能会遇到透明度问题。在这种情况下，您可以保留正常输入字段而不使用粗体效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>transp</title>
    <style>
        div{
            position:relative;
        }
        input, span{
            top:0;
            position:absolute;
            width:120px;
        }
        span{
            top:2px;
            left:2px;
            z-index:1;
            overflow:hidden;
        }
        input{
            background:transparent;
            z-index:2;
        }
    </style>
</head>
<body>
<div>
    <input onkeyup="bold3(this)" />
    <span id="back"></span>
</div>
<script>
function bold3(inp){
    inp.style.color = 'transparent';
    var span = document.getElementById('back');
    span.innerHTML = 
        '<b>' + 
        inp.value.substr(0, 3) + 
        '</b>' + 
        inp.value.substr(3);
}
</script>
</body>
</html>

Answer 2

这取决于您要支持的浏览器。如果你只是想支持HTML5浏览器，只需使用contenteditable标志设置div并使用css将其设置为看起来像输入。

<div contenteditable>Text <b>bold</b></div>

如果粗体位于一个非常受控制的区域，那么可能会执行以下操作：

<div>
    <input type="text" style="font-weight: bold;" value="Bold text" />
    <input type="text" value="This is not" />
</div>

使用CSS来设置它的样式，并使用JS来管理开销。这可能会很快变得丑陋。

Answer 3

也许一个可能的解决方案是使用可编辑的div，如下所示：

<div contentEditable="true">
    Lorem <b>ipsum</b> dolor
</div>

如果您尝试在表单中提交此值，则必须使用JavaScript来获取此div的innerHTML并将其分配给隐藏的输入或其他内容。

Answer 4

试试这个：

<input type="text" style="font-weight: bold;" value="Some Value" />

但是这样，元素中的整个文本将以粗体显示。我想没有简单的方法来设计一段文字

Answer 5

我们需要类似于android视图的东西，它允许自定义的html标记，链接识别等，原生......这就是问题所在。

Answer 6

拥有此类内容的最真实方法是构建自己的自定义元素。

您可以创建自己的<my-input></my-input>元素，并自定义您自己的输入。

如何在输入文本字段中创建一些粗体文本？

6 个答案: