Javascript 在html输入的末尾有一个不可移动的问号

我已经找了好长时间想弄明白这一点，希望你能帮我

基本上，我在我的网站上有一个功能，用户可以发布一个问题。基本上，我希望在他们输入的内容的末尾有一个永久的问号。在后端已经添加了问号，因此这完全是一个视觉问题

当他们打字时，问号向上移动

我无法附加照片，但您可以进行成像：

用户在此处键入，然后在键入行后面有一个问号（键入行-->）|

提前谢谢

您可以这样做：

$('#a').keyup(function(){
  var v = this.value.replace(/\?/g, '') + '?';
  if (this.value != v) this.value = v;
});

但用户并不真正喜欢输入内容本身发生变化。如果可能的话，我会避免这样做

第二个版本在？前面加了一个空格：

$('#a').keyup(function(){
  var v = this.value.replace(/ ?\?/g, '') + ' ?';
  if (this.value != v) this.value = v;
});

---

使用一点javascript

将事件附加到tickbox的onkeyup事件上，每当它触发时，检查内容是否以问号结尾。如果没有，请添加它

---

但就我个人而言，这会让我很恼火，因为作为一个用户，我更喜欢在提交后才看到问号。

我可能会建议您在服务器上进行检查，看看问题的结尾是否包含问号（或多个），然后替换/添加单个问号

---

如前所述，强制输入某些内容并不是很友好——自己做适当的检查并减轻用户的负担。

如果目标仅仅是视觉强化，那么在文本输入之外放置一个文本或图形问号可能是最简单的，可能是一种有趣的颜色，喜欢粗体绿色。

当用户键入时，您并不想试图操纵

输入；您可能总是会遇到内容被破坏的边缘情况。如果纯粹是为了表现，只需在输入后添加一个
？
字符；如果您用
span
之类的东西围绕它，您可以使用CSS来调整其大小或字体重量，使其更加明显：

.jumbo
{
    font-size: 2em;
}

<input /><span class="jumbo">?</span> 

.jumbo
{
字号：2em；
}
? 

另一种解决方案（如果您还没有使用它，那就太夸张了）是使用FontAwesome之类的图标字体，并添加问号图标：

您可以将可编辑文本放在contenteditable范围内，后面是另一个带有不可编辑问号的范围



这是我可以编辑的内容
?
这里有一个相当不错的解决方案，它是基于上面和其他关于堆栈溢出的思想构建的。使用jQuery

只需添加以下代码段，然后将类
QuestibleInput
添加到您的
input



你为什么不做css？我不知道你的问题是什么。你能描述得再清楚一点吗？你真的不能这么做。这只会干扰用户输入问题的尝试。@DanielA.White你是怎么做的？这对用户来说似乎不必要且令人沮丧。我编辑了第一个替换，以便更准确地完成OP要求的操作。这只会清除字符串中存在的任何尾随问号，而不是*所有的问号，因此用户可以将问号添加到不在末尾的较大语句中。@Dr.Dredel我认为您没有测试您的更改。您是对的。。。很抱歉去掉结尾的g：）但是你为什么要去掉所有的问号呢？我没有找到一个真正有效的方法来获得答案？在问题的中间，这就是为什么我把它们全部删除。你可以用箭头来添加一个？（不优雅，但如果在你做了之后它消失了，那就更令人沮丧了！）我认为OP是在要求一些不应该做的事情。。。但如果真的要这样做，这是一个非常酷和体面的方式去做！很多代码，但这似乎是我一直在寻找的脚本类型，谢谢。谢谢大家的意见！！！
<input /><i class="icon-question icon-large"></i>

<div class="box">
    <span contenteditable="true">This is content i can edit</span>
    <span class="question-mark">?</span>
</div>

(function($) {
    $.fn.getCursorPosition = function() {
        var input = this.get(0);
        if (!input) return; // No (input) element found
        if ('selectionStart' in input) {
            // Standard-compliant browsers
            return input.selectionStart;
        } 
    }

    $.fn.setCursorPosition = function(pos) {
        var input = this.get(0);
        if (!input) return; // No (input) element found
        if ('selectionStart' in input) {
            // Standard-compliant browsers
            input.selectionStart = pos;
            input.selectionEnd = pos;
        } 
    }

    $(".questionableInput").keyup(function(e) {
      if (e.keyCode == 37 || e.keyCode == 38 || e.keyCode == 39 || e.keyCode == 40 || e.keyCode == 13
          || e.keyCode == 8 || e.keyCode == 17 || e.keyCode == 16 || e.keyCode == 36 || e.keyCode == 63
         || e.keyCode == 35 || e.ctrlKey) {
          return;
      }
      var positionBeforeMessingWithIt = $(this).getCursorPosition();
      if (this.value.slice(-1)!='?') this.value += '?';
      if (this.value.slice(-2)=="??") this.value = this.value.substring(0, this.value.length - 1);
      $(this).setCursorPosition(positionBeforeMessingWithIt);
   });

})(jQuery);