16

我正在尝试在输入文本字段中获取粗体的特定文本。我不知道该怎么做，因为 html 代码不会在文本字段内解释，所以任何类似的东西<b>都行不通。是否可以只加粗一些文本？像 bold() 这样的方法只<b>在字符串周围添加。

谢谢

4

5 回答 5

5

这是一个技巧。

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>
于 2012-05-31T19:04:17.530 回答
4

这取决于您要支持的浏览器。如果您只想支持 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 管理开销。不过，这很快就会变得丑陋。

于 2012-05-31T18:52:38.657 回答
2

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

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

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

于 2012-05-31T18:45:48.070 回答
0

我们需要像android视图这样的东西，它允许自定义html标记、链接识别等，本机......这就是问题所在。

于 2016-09-26T14:46:30.697 回答
0

拥有这样的东西最真实的方法是构建自己的自定义元素。

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

于 2018-01-15T19:41:48.923 回答