Вводить мелкий текст в поле ввода

[html]
<style>
#container{
    text-align:center;
    width:340px;
    height:480px;
    margin:auto;
    position:relative;
    background:#006f81;
}
#menu{
    padding-top:10px;
    padding-left:20px;
    font-size:55px;
    width:100%;
}
#game{
    padding-top:10px;
    font-size:55px;
    width:100%;
    display:none;
}
#opcje{
    padding-top:10px;
    font-size:55px;
    width:100%;
    display:none;
}
#autor{
    font-size:55px;
    width:100%;
    display:none;
}
.txt{
    font-size:24px;
    width:80%;
    margin:auto;
}
.txt a{
    text-decoration:none;
    color:#000;
}
svg line{
    stroke:#000;
    stroke-width:5
}
#back{
    text-align:center;
    width:140px;
    margin:auto;
    background-color: #008499;
    color: white;
   
    font-size:24px;
    cursor:pointer;
    display:none;
}
#back:hover{
    background-color:#4c9aa6;
}
#pass{
    font-size:24px;
    width:250px;
    margin:5px auto 5px auto;
    border-radius:10px;
    background-color:#008499;
    border: 1px black;
    padding:4px 0;
      cursor:default;
}
.title{
    color:#ededed;
    width:340px;
    font-size:48px;
      font-family:nosifer;
}
ul{
    list-style-type: none;
    margin:auto;
    margin-top: 0;
    width: 300px;
    padding:0;
}
li a, li a.lock:hover{
    width: 300px;
    position:relative;
    left:0;
    font-size:24px;
    margin:5px 0;
    display: block;
    color: white;
    padding: 6px 0 6px 0;
    text-decoration: none;
    background-color: #005968;
      cursor:pointer;
    border-radius:5px;
}
li a:hover {
    background-color:#008499
;
    color: white;
    width: 320px;
    position:relative;
    left:-10px;
    cursor:hand;
}
li a.lock{
    opacity:0.5;
}
#alphabet{
    color:#fff;
    font-size:18px;
    margin: auto;
    margin-bottom:5px;
    display: flex;
    flex-wrap: wrap;
    width:90%;
    justify-content: center;
}
#alphabet span{
    background-color:#008499;
    margin: 3px 5px;
    height:25px;
    width:25px;
    padding:4px;
    border-radius:30%;
    cursor:pointer;
}

.red{
    opacity:0.4 !important;
    background:red !important;
}
.green{
    opacity:0.4 !important;
    background:lime !important;
}
#svg{
    margin:auto;
    background-color:#008499;
    width:280px;
    height:220px;
}
svg{
    position:absolute;
    left:50px;
}
.tb1{
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: dash 5s linear forwards;
    stroke-linecap:round;
}
@keyframes dash {
    to { stroke-dashoffset: 0; }
}
#stickman{
    position:absolute;
    left:190px;
    bottom:0;
      cursor:pointer;
}
@keyframes jmp{
    0% { }
    11%{ transform: rotate(270deg);  bottom:30px; left:260px;}
    22%{ transform: rotate(450deg);  bottom:100px; left:0;}
    33%{ transform: rotate(630deg);  bottom:150px; left:260px;}
    44%{ transform: rotate(810deg);  bottom:210px; left:0;}
    55%{ transform: rotate(990deg);  bottom:250px; left:260px;}
    66%{ transform: rotate(1170deg);  bottom:200px; left:0;}
    77%{ transform: rotate(1350deg);  bottom:150px; left:260px;}
    88%{ transform: rotate(1530deg);  bottom:40px; left:0;}
    100%{ transform: rotate(1800deg); }
}
</style>
<script>
errors=0;
pkt=0;
toggle=0;
word = [
    "слово", "слово", "слово", "слово", "слово", "слово","слово", "слово", "слово","слово", "слово", "слово","слово", "слово", "слово","слово", "слово", "слово","слово", "слово", "слово","слово", "слово", "слово","слово", "слово", "слово","слово", "слово", "слово","слово", "слово", "слово","слово", "слово", "слово","слово", "слово", "слово","слово", "слово", "слово", "слово"
    ];

$(document).ready(function(){
    $("#alphabet span").click(function(){
        var input = $(this).html();
        var styyl = $(this).attr("id");
        check(input, styyl);
    });
});
function gra(){
    startgame();
    startpass();
    hide();
    $("#menu").hide();
    $("#game").show();
    $(".title").hide();
    $("#back").toggle();
}
function showMenu() {
    $("#menu").show();
    $("#game").hide();
    $("#opcje").hide();
    $("#autor").hide();
    $(".title").show();
    $("#back").toggle();

}
function showOptions() {
    $("#back").toggle();
    $("#menu").hide();
    $("#opcje").show();
}
function showInfo() {
    $("#back").toggle();
    $("#menu").hide();
    $("#autor").show();
}
function exit(){
    c=confirm("Are you sure?");
    if (c==true){
        window.location.href = "#";
    }
}
function hide() {
    $("#svg svg").hide();
}
function startpass(){
    boxy = new Array();
    hiden="";
    hub=wordp;
    i=hub.length;
    for(i=0; i<hub.length; i++)
    {
        hiden=hiden+"*";
        boxy[i]="*";
    }
    $("#pass").text(hiden);
}
function startgame(){
    errors=0;
    n=Math.floor(Math.random() * 110);
    wordp=word[n];
    clearAlphabet();
}
function jump(){
    if(toggle==0){
        $("#stickman").css("animation","jmp 4s ease-out ");
        toggle=1;
    }
    else{
        $("#stickman").css("animation","none");
        toggle=0;
    }
}

function szubienica(){
    errors++;
    if(errors<11){
        $("#t"+errors).show();
    }
    else{
        $("#t"+errors).show();
        alert("You lost! \nWord is: "+wordp+"\nFinal score is: "+pkt);
        window.setTimeout(gameOver, 600);
    }
}
function gameOver(){
    pkt=0;
    hide();
    showMenu();
}
function clearAlphabet(){
    $("#alphabet span").removeClass("red green");
}
function check(val,styl){
    if (wordp.indexOf(val) > -1){
        $("#"+styl).addClass("green");
        slowa(val);
    }
    else{
        $("#"+styl).addClass("red");
        szubienica();
    }
}
function slowa(val){
    n=wordp.length;
    for(i=0; i<n; i++){
        st=wordp.indexOf(val, i);
        boxy[st]=val;}
        hiden='';
    for(d=0; d<n; d++){
        hiden+=boxy[d];
        $("#pass").text(hiden);
    }
    win();
}
function wygrana(){
        pkt++;
    alert("Congratulations! \nYour score is: "+pkt+"\nLet's continue!");
    gra();
    $("#back").toggle();
}

function win(){
    if(hiden==wordp){
    window.setTimeout(wygrana, 600);
    }
}
</script>

<html>
<head>
      <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
   <link href="https://fonts.googleapis.com/css?family=Nosifer" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
  <title>Виселица</title>
</head>

<body onselectstart="return false">
     
  <div class="container">
      <div id="container">
    <div class="title">ВИСЕЛИЦА</div>
    <!-- Menu start -->
    <div id="menu">
      <div id="opt">
        <ul>
          <li><a onClick="gra();" id="play">PLAY</a></li>
          <li><a onClick="showInfo();" id="auth">INFORMATIONS</a></li>
          <li><a onClick="exit();" id="exit">EXIT</a></li>
        </ul>
      </div>
      <svg id="stickman" onclick="jump()" width="80px" height="100px">
<circle cx="40" cy="20" r="13" stroke="black" stroke-width="5" fill="white" />
<line x1="40" y1="35" x2="40" y2="70" />
<line x1="40" y1="50" x2="10" y2="20" />
<line x1="40" y1="50" x2="70" y2="20" />
<line x1="40" y1="70" x2="20" y2="100" />
<line x1="40" y1="70" x2="60" y2="100" />
</svg>
    </div>

    <div id="game">
      <div id="svg">
        <svg id="t1" width="280px" height="250px" style="display:none">
            <line class="tb1" x1="20" y1="200" x2="20" y2="20" />
        </svg>
        <svg id="t2" width="280px" height="250px" style="display:none">
            <line class="tb1" x1="20" y1="20" x2="160" y2="20" />
        </svg>
        <svg id="t3" width="280px" height="250px" style="display:none">
            <line class="tb1" x1="21" y1="160" x2="60" y2="200"  />
        </svg>
        <svg id="t4" width="280px" height="250px" style="display:none">
            <line class="tb1" x1="20" y1="50" x2="50" y2="20"  />
        </svg>
        <svg id="t5" width="280px" height="250px" style="display:none">
            <line class="tb1" x1="140" y1="20" x2="140" y2="50"  />
        </svg>
        <svg id="t6" width="280px" height="250px" style="display:none">
            <circle class="tb1" cx="140" cy="50" r="15" stroke="black" stroke-width="5" fill="white" />
        </svg>
        <svg id="t7" width="280px" height="250px" style="display:none">
            <line class="tb1" x1="140" y1="65" x2="140" y2="100"  />
        </svg>
        <svg id="t8" width="280px" height="250px" style="display:none">
            <line class="tb1" x1="140" y1="70" x2="120" y2="100"  />
        </svg>
        <svg id="t9" width="280px" height="250px" style="display:none">
            <line class="tb1" x1="140" y1="70" x2="160" y2="100"  />
        </svg>
        <svg id="t10" width="280px" height="250px" style="display:none">
            <line class="tb1" x1="140" y1="100" x2="120" y2="130"  />
        </svg>
        <svg id="t11" width="280px" height="250px" style="display:none">
            <line class="tb1" x1="140" y1="100" x2="160" y2="130"  />
        </svg>
      </div>
      <div id="pass"></div>
      <div id="alphabet">
        <span id="а">а</span><span id="б">б</span>
        <span id="в">в</span><span id="г">г</span>
        <span id="д">д</span><span id="и">и</span>
        <span id="к">к</span><span id="л">л</span>
        <span id="м">м</span><span id="н">н</span>
        <span id="о">о</span><span id="п">п</span>
        <span id="р">р</span><span id="с">с</span>
        <span id="т">т</span><span id="у">у</span>
        <span id="ф">ф</span><span id="х">х</span>
        <span id="ц">ц</span><span id="ш">ш</span>
        <span id="щ">щ</span><span id="ы">ы</span>
        <span id="ь">ь</span><span id="ъ">ъ</span>
        <span id="э">э</span><span id="ю">ю</span>
        <span id="я">я</span>
      </div>
    </div>
   
    <div id="opcje">
      <div id="opt">
        <ul>
          <li><a class="lock" id="lang">LANGUAGE</a></li>
          <li><a class="lock" id="sound">DIFFICULTY</a></li>
          <li><a class="lock" id="login">LOGIN</a></li>
        </ul>
      </div>
    </div>
   
    <div id="autor">
      <div class="txt">
        Hangman game ...
        <br>
        <p>&copy;Created by<br>AOULI Oussama<a target='_blank' href='#'></a></p>
      </div>
    </div>

   
    <div onClick="showMenu();" id="back">MENU</div>
  </div>
        </div>
</body>

</html>
[/html]

Подпись автора

ПОМОШНИК МАЧОнаДАЧЕ