Question

我已经好好看了好几年，试图找出这个，希望你能帮助我。

基本上我的网站上有一个功能，用户可以发布问题。基本上我想在他们打字的结尾处留下永久性问号。问号已经添加到后端，所以这绝对是一个视觉问题。

问号在键入时会向上移动。

我无法附上照片，但你可以成像：

用户在此处输入并在类型行后面有一个尾随问号（类型行 - ＆gt;）|？

提前致谢!!

Answer 1

你可以这样做：

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

Demonstration

但是当用户输入的内容发生变化时，用户并不喜欢。如果可能，我会避免这种情况。

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

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

Demonstration

Answer 2

使用一点点javascript。

将一个事件附加到复选框的onkeyup事件上，每当它触发时，检查内容是否以问号结尾。如果没有，那就添加它！

就个人而言，作为一个用户，它会让我感到烦恼 - 我希望在提交后只看到问号。

Answer 3

我可能会建议您检查服务器以查看问题末尾是否包含问号（或多个），然后替换/添加单个问号。

正如已经说过的那样，强制某种输入并不是非常友好 - 自己进行适当的检查并减轻用户的负担。

Answer 4

如果目标仅仅是视觉强化，那么将文本或图形问号放在文本输入之外可能是最容易的，可能是有趣的颜色，如粗体绿色。

Answer 5

您并不想在用户输入时尝试操纵input;你可能会遇到内容被破坏的边缘情况。如果纯粹出于演示目的，只需在输入后添加?字符;如果你用span这样的东西包围它，你可以用CSS来定位它来调整它的大小或字体重量，使它更明显：

.jumbo
{
    font-size: 2em;
}

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

另一种解决方案（但如果你还没有使用它，那就是矫枉过正）是使用像FontAwesome这样的图标字体，然后添加问号图标：http://fortawesome.github.io/Font-Awesome/icon/question/

<input /><i class="icon-question icon-large"></i>

Answer 6

您可以将可修改的文字放在可信范围内，然后是另一个具有不可编辑问号的范围。

http://jsfiddle.net/Paawn/1/

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

Answer 7

这是一个相当不错的解决方案，它基于上面和其他地方关于堆栈溢出的想法。使用jQuery

只需添加以下代码段，然后将课程questionableInput添加到input
<input id="yourInput" type="text" name="theInput" class="questionableInput"/>

(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);

http://jsfiddle.net/YpEgN/2/

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

7 个答案: