0

だから、私はこのテキストエリアをhtmlに持っていて、twitterのようなものを実装しようとしています.

ユーザーが「#」と入力するたびに、単語を強調表示し、単語の最後に文字数を表示したいと考えています。たとえば、「こんにちは、私の名前は #user123(7) です。あなたの名前は?」私はすでに強調表示を処理していますが、現在、文字数の部分で迷っています。ここに私のHTMLがあります

<div id="inputback" class="format"></div>
<textarea id="input" class="format"></textarea>

Javascript

var textarea = document.getElementById("input");
var hashflag = 0 ;
var textlength;

textarea.onkeydown = function(e){
  textarea.style.height = "";
  textarea.style.height = textarea.scrollHeight + "px";
  textlength = textarea.value.length;

  var str = textarea.value;
  str = str.replace(/(\s)([#]\w*)/g, "$1<b>$2</b>");
  $('#inputback').html(str); 
}

ここに私のCSSがあります

    .format
{
    font: 9pt Consolas;

}

#input { border: 1px solid black; background: transparent; z-index: 10; }

#inputback {

    color: transparent;
    position: absolute;
    top: 0px
}
#inputback b
{
    color: black;
    background-color: #808080;
    font-weight: normal;
}

これが私が達成したことの私のjsfiddleです。 http://jsfiddle.net/gjqWy/115/

前もって感謝します！

PSプラグインやJqueryを使用したくありません。ただのJavascript/html/css

4

3 に答える 3

1

.replace2 番目のパラメーターとして関数を使用することもできます。

str = str.replace(/(^|\s)#(\w+)/g,function(_,a,b) {
    // _ represents the full match - we don't need it here
    // a is the first subpattern
    // b is the second subpattern
    return a+"<b>#"+b+"</b>("+b.length+")";
});

正規表現を少し調整しました。これで、ハッシュが文字列の先頭にある場合でも機能します。また、a) 定数であり、b) 2 番目のキャプチャ グループの長さが必要なため、キャプチャされたグループからハッシュを取り出しました。より簡単に。

于 2013-09-29T15:57:44.333 に答える
0

JavaScript.indexOfメソッドを使用して、フォームの値で最初に出現する # 場所を見つけます。チェック対象の文字列で最初に出現する「#」を見つけ、その場所を返します。

例えば

var string = "This is stackoverflow";
var start = string.indexOf('is'); //Will return as 5

それをすべてソートしたら、その後の値を取得する必要があります。このような

var string = "This is stackoverflow";
var start = string.indexOf('is') + 2; //7 (You add 2 because its a 2 letter word)
var end = string.length; //20
var newstring = string.substr(start, end);

この情報を取得して、var string を次のように置き換えることでフォーラムに適用できますdocument.getElementById('inputidhere').value;。

幸運を！これがお役に立てば幸いです。

于 2013-09-29T16:13:38.293 に答える
0 
<form id="testForm">
  <input id="A1" type="text"></input>
  <div id="vsA1" class="inputTextSummery">charaters reamining: 40</div>
  </form>
  <script type="text/javascript">
     function wordCount(_input, _limit, _summary)
     {
       var limit = _limit; //set limit of charater
         var inputDiv = "#"+_input;  //inout div id
         var displayDiv = "#"+_summary; //display summary div id
       var currentWordCount = 0;  //defualt current charater count
       $(inputDiv).keyup(function(){   //
             currentWordCount = $(inputDiv).val().length;
             var charLeft = limit - currentWordCount;
             if(charLeft >= 0){
              $(displayDiv).html("charaters reamining: "+ (limit - currentWordCount));
             }else{
              $(displayDiv).html("Input has exceed limit!");     
             }
        });     
     }
     wordCount("A1", 40, "vsA1");
于 2013-09-29T15:58:09.033 に答える