2

我已经环顾四周试图弄清楚这一点，希望你能帮助我。

基本上我的网站上有一个功能，用户可以在其中发布问题。本质上，我希望在他们输入的内容末尾加上一个永久的问号。问号已经添加到后端，所以这严格来说是一个视觉问题。

当他们键入时，问号会向上移动。

我不能附上照片，但你可以成像：

用户在此处键入，在类型行之后有一个尾随问号（类型行-->）|？

提前致谢！！

4

7 回答 7

2

你可以这样做：

$('#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;
});

示范

于 2013-07-29T19:51:20.437 回答
0

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

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

<div class="box">
    <span contenteditable="true">This is content i can edit</span>
    <span class="question-mark">?</span>
</div>
于 2013-07-29T20:03:09.680 回答
0

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

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

于 2013-07-29T19:57:09.863 回答
0

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

于 2013-07-29T19:59:27.973 回答
0

使用一点 JavaScript。

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

不过，就我个人而言，这会让我很恼火，作为用户，我宁愿在提交后只看到问号。

于 2013-07-29T19:55:11.077 回答
0

您真的不想input在用户键入时尝试操作；您可能总是会遇到内容被破坏的边缘情况。如果纯粹是出于演示目的，只需?在输入后添加一个字符即可；如果你用类似 a 的东西包围它span，你可以用 CSS 来调整它的大小或字体粗细，使其更明显：

.jumbo
{
    font-size: 2em;
}

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

另一种解决方案（如果你还没有使用它，但过度杀伤）是使用像 FontAwesome 这样的图标字体并添加问号图标： http: //fortawesome.github.io/Font-Awesome/icon/问题/

<input /><i class="icon-question icon-large"></i>
于 2013-07-29T20:00:54.977 回答
0

这是一个相当不错的解决方案，它基于堆栈溢出上面和其他地方的想法。使用 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/

于 2013-07-29T20:58:03.427 回答