文本框类型特殊字符

Question

文本框类型特殊字符

javascriptjqueryhtmlcss

3

我希望在文本框中，用户可以按下键盘上的字母并输入 𝒜ℬ𝒞𝒟 等特殊字符（例如键入 &ascr ; &bscr ;）。

有没有什么方法可以实现这一点？并且让用户自由地编辑字符，就像在普通文本框中一样。

用户将能够单击以选择样式（设置我的 var style 整数），字母将是不同的样式，如 𝔄𝔅ℭ𝔇 (&Afr ; &Bfr ; &Cfr ; 等等)。

我想最终实现的目标是用户打出一段话，然后文本以所选样式格式显示在文本框中，他们可以在其中切换样式。然后他们将能够复制文本/将其保存为 .html 文件。

欢迎任何方法！ :)

谢谢！

.

用户可输入的示例：Hello my name is Friedpanseller!

文本框可能显示的内容：ℋℯ𝓁𝓁ℴ ℳ𝓎 𝒩𝒶𝓂ℯ ℐ𝓈 𝔉𝔯𝔦𝔢𝔡𝔭𝔞𝔫𝔰𝔢𝔩𝔩𝔢𝔯！

然后用户可以像普通文本框一样删除一些单词/编辑它们

用户可输入的示例：My names are Friedpanseller!

文本框可能显示的内容：ℳ𝓎 𝒩𝒶𝓂ℯ𝓈 𝒜𝓇ℯ 𝔉𝔯𝔦𝔢𝔡𝔭𝔞𝔫𝔰𝔢𝔩𝔩𝔢𝔯！

- Leo Liu

我认为你的HTML页面没有获取字体。控制台上有任何错误吗？ - shiva chauhan

我希望用户能够随时输入。我可以预设文本区域的内容，但用户无法使用花式字体键入自己的段落。 - Leo Liu

1

http://stackoverflow.com/questions/12850088/simple-jquery-plugin-to-insert-special-characters-into-textarea-field-non-edito - Rino Raj

Rino，我现在可以使用那个，但用户会感到烦恼，因为他们必须点击他们输入的字母。这样更慢且更令人沮丧。 - Leo Liu

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hardipsinh Jadeja · Answer 1

尝试使用第三方工具（我大多数情况下喜欢使用CKEditor），因为它是免费的。

- fnune · Answer 2

这里有一个你可以尝试的例子。在文本框中输入“a”（不带引号）。虽然速度不是特别快，但我已经尽力收集了一些信息。它并不能满足你所有的要求，但至少是一个开始。

$("textarea").bind("keyup", function() {
    var cursorPosition = $('textarea').prop("selectionStart");
    var text = $(this).val();
    if (text.indexOf('a') > -1) {
        text = text.replace(/a/g, '');
        $(this).val(text);
        $('textarea').prop("selectionStart", cursorPosition - 1);
        $('textarea').prop("selectionEnd", cursorPosition - 1);
    }
});

你可以尝试系统地应用这种方法来替换你想要替换的字符。祝你好运。

- Nitin Sinha · Answer 3

当您在空白的HTML中添加代码时，请为jQuery事件绑定添加document.ready。

$(document).ready(function(){
$("textarea").bind("keyup", function() {
    var cursorPosition = $('textarea').prop("selectionStart");
    var text = $(this).val();
    if (text.indexOf('a') > -1) {
        text = text.replace(/a/g, '');
        $(this).val(text);
        $('textarea').prop("selectionStart", cursorPosition - 1);
        $('textarea').prop("selectionEnd", cursorPosition - 1);
    }
});
});

如果我们在不同的HTML页面中使用相同的代码，它会以这种方式工作。