在 HTML 5 表单中的每个单词的开头添加一个标签 (#) [关闭]答案

【问题标题】：Add a hashtag (#) to beginning of each word in a HTML 5 form [closed]在 HTML 5 表单中的每个单词的开头添加一个标签 (#) [关闭]
【发布时间】：2015-02-19 12:44:21
【问题描述】：

我的 HTML 文档的页面上有一个表单，我想知道 javascript 或 jquery 是否有办法在每个单词的开头添加井号 (#)（可能输入了多个单词）

【问题讨论】：

表单域中的哪些词？在您的文档中，您尝试了什么？
在页面加载或用户输入时？
主题标签是一个以# 为前缀的完整单词。 # 是一个井号/数字符号。
我希望表单中的单词在用户输入时添加 #。

标签： javascript jquery html css hashtag

【解决方案1】：

您可以通过 keyup 事件侦听器和一些替换和 indexOf 来实现这一点：

<input id="test">

<script>
var a = document.getElementById('test');
a.addEventListener('keyup',addthis);

function addthis() {
    b = a.value.replace('#',''); 
    a.value = '#'+b

    if (a.value.indexOf(' '))
    {
    a.value = a.value.replace(' ','#');
    }

}
</script>

DEMO

【讨论】：

baao 效果很好！有没有办法阻止它向空间添加主题标签？
@user2640633 试试这个，有点小车，但有点工作jsfiddle.net/hotfwzcL/1
Jonathan Lonowski ~ 有很多不相关的 Jquery 固定在这个表单上。我可以轻松地放置它的 HTML 部分，但我有一个切换开关，切换时会更改表单内的占位符文本。我承认我对 javascript 和 jquery 知之甚少......我的老师帮助我完成了大部分工作，我尝试阅读他的代码并尝试理解它
@RubberDucky4444 看看这个，这很好去jsfiddle.net/hotfwzcL/2

【解决方案2】：

这会做你想做的事情，并将光标移动到字段的末尾以启动。

更新：使用keydown 代替过滤掉多个空格。

function addHash(event) {
    if (event.keyCode === 32 && event.target.value.length) {
        event.preventDefault();

        var elem = event.target,
        val = elem.value;

        if (val.slice(-1) !== '#') {
            elem.value += ' #';
        }
    } else if (!event.target.value.length) {
        if (event.keyCode === 32) {
            event.preventDefault();
        }
        event.target.value = '#';
    }
}

我分叉了baao的小提琴来测试。

DEMO

【讨论】：

不错的一个！但是如果你按两次空格键，它也会给你额外的#。
@RubberDucky4444 请重新检查代码。它现在也将 # 添加到开头，并执行您想要的所有操作。按住空格也不会破坏它（它确实会破坏 baao 的：尝试在他的代码中按住空格）。如果要删除空格，只需删除elem.value += ' #';中#下面的空格即可。

【解决方案3】：

您可以使用 jquery onchange eventlistner 来实现这一点。

下面的脚本获取输入字段的值并将每个单词拆分为一个空格“”，使其成为一个数组。然后它循环遍历单词数组，如果单词在单词的开头没有“#”，则添加一个。然后它将输入字段中的旧值替换为新值。

$('#input').on('change', function(e){
    var input_string = $(this).val();
    var words = input_string.split(" ");
    var output = "";
    console.log(words);
    $.each(words , function(i, word ){
        console.log(word);
        if(word.substr(0, 1) == "#") 
        {            
            output += word + " ";           
        }
        else
        {
           output += "#" +  word + " ";    
        }
         console.log(output);
    });

    $(this).val(output);
});

http://jsfiddle.net/dgs9kapc/6/

【讨论】：

Makaze 效果很好，只是它不会在第一个单词中添加 #！感谢大家的帮助！！！！
我忘了给输出赋值。这就是为什么第一个词没有得到#。我更新了小提琴和链接。