Question

所以我试图在我的文本框中显示键入的单词如下例所示：（thomas）将显示为=＆＃34; t，th，tho，thom，thoma，thomas＆＃34;。我在charAt中输入什么来实现这一目标？还是我需要添加别的东西？提前致谢！

<head>
  <meta charset="utf-8">

 <script>

    function printit()
    {
     var temptext = document.getElementById("mytext").value;   
     var tempa = temptext.charAt();
     document.getElementById("translated").innerHTML=tempa;

    }

 </script>


 </head>


 <body>
   <h1> </h1> 

<form name="f1">
 <input type="text" id="mytext" value="" />
 <input type="button"  value="print" onclick="printit()"/>

 </form>
 <div id="translated"  style="background-color:gray"></div> 

</body>


</html>

Answer 1

使用Array.from和String#slice方法的ES6解决方案。

＆＃13;

<script>
  function printit() {
    var temptext = document.getElementById("mytext").value;
    document.getElementById("translated").innerHTML = Array.from({
      length: temptext.length
    }, (v, i) => temptext.slice(0, i + 1)).join();

  }
</script>


<form name="f1">
  <input type="text" id="mytext" value="" />
  <input type="button" value="print" onclick="printit()" />

</form>
<div id="translated" style="background-color:gray"></div>

＆＃13;

使用Array#map和String#split方法。

＆＃13;

<script>
  function printit() {
    var temptext = document.getElementById("mytext").value;
    document.getElementById("translated").innerHTML = temptext.split('').map(function(v, i) {
      return temptext.slice(0, i + 1)
    }).join();

  }
</script>


<form name="f1">
  <input type="text" id="mytext" value="" />
  <input type="button" value="print" onclick="printit()" />

</form>
<div id="translated" style="background-color:gray"></div>

＆＃13;

Answer 2

更简单的解决方案：

＆＃13;

function writemore(){
    var a = document.getElementById("mytext").value;
    var out = [];
    for(var i=1;i<a.length+1;i++){
       out.push(a.substring(0,i));
    }
    document.getElementById("translated").innerHTML = out.join(',');
};

＆＃13;

<form name="f1">
  <input type="text" id="mytext" value="" />
  <input type="button" value="print" onclick="writemore();" />

</form>
<div id="translated" style="background-color:gray"></div>

＆＃13;

Answer 3

您可以使用Array.prototype.map和String.prototype.slice来生成预期结果。

function printit(){
  var text = document.getElementById('mytext').value;
  document.getElementById("translated").innerHTML = text.split('').map(function(v, i){ return text.slice(0, i + 1)}).join(', ');
}

<h1> </h1> 

<form name="f1">
  <input type="text" id="mytext" value="" />
  <input type="button" value="print" onclick="printit()" />

</form>
<div id="translated" style="background-color:gray"></div>

Answer 4

If you want to display "t, th, tho, thom, thoma, thomas" you should to store your position of charAt(position+1) and make for condition.., so :

t : 0==> display  = display  + ", "+ charAt(position+1)
th : 1==> display  = display  + ", "+ charAt(position+1)
tho: 2 ==> display  = display  + ", "+  charAt(position+1)

Answer 5

最简单的方法，如果您使用charAt进行设置，将是：

var outputString = "", inputString = "Thomas", i = -1, inputLength = inputString.length

while(++i < inputLength){
  outputString += inputString.charAt(i)
  console.log(outputString)
}

如果它真的需要打印，那么，th，thom，thoma，thomas＆＃34;而不是一系列日志，这个版本将完成

var outputString = "", outputArray = [], inputString = "Thomas", i = -1, inputLength = inputString.length

while(++i < inputLength){
  outputString += inputString.charAt(i)
  outputArray.push(outputString)
}


console.log(outputArray.join(", "))

Javascript-用charAt一个字母+一个字母显示单词，依此类推

5 个答案: