入力プレースホルダ内に入力カルーセルを作成するにはどうすればよいですか？

は、私は私の入力プレースホルダがdynamic writing私#myInputプレースホルダ入力プレースホルダ内に入力カルーセルを作成するにはどうすればよいですか？

 <div class="form-group"> 
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
     <center><label class="heypal-label"><span id="heypal">HeyPal<span class="gray-lighter">.me/</span></span></label> 
     <input id="myInput" type="text" class="form-control conference-input"> 
     <button type="submit" class="btn btn-lg btn-danger btn-autosize">Go!</button></center> 
     </div> 
    </div>

上の任意のアイデアを上にどのようにこれを行っているしていること、this

私が望むようなものをタイピングカルーセルをしたいですか？ありがとう

出典

2017-08-10 h_h10a

あなたは本当に、あなたの入力要素とテキストで新しいTxtRotateオブジェクトを作成する必要があります。

new TxtRotate(element, textArray, waitTimeMs);

次に、プレースホルダにテキストを表示するには、プレースホルダテキストを要素に設定します。

this.el.placeholder = this.txt;

var TxtRotate = function(el, toRotate, period) { 
 
    this.toRotate = toRotate; 
 
    this.el = el; 
 
    this.loopNum = 0; 
 
    this.period = parseInt(period, 10) || 2000; 
 
    this.txt = ''; 
 
    this.tick(); 
 
    this.isDeleting = false; 
 
}; 
 

 
TxtRotate.prototype.tick = function() { 
 
    var i = this.loopNum % this.toRotate.length; 
 
    var fullTxt = this.toRotate[i]; 
 

 
    if (this.isDeleting) { 
 
    this.txt = fullTxt.substring(0, this.txt.length - 1); 
 
    } else { 
 
    this.txt = fullTxt.substring(0, this.txt.length + 1); 
 
    } 
 

 
    this.el.placeholder = this.txt; 
 

 
    var that = this; 
 
    var delta = 300 - Math.random() * 100; 
 

 
    if (this.isDeleting) { 
 
    delta /= 2; 
 
    } 
 

 
    if (!this.isDeleting && this.txt === fullTxt) { 
 
    delta = this.period; 
 
    this.isDeleting = true; 
 
    } else if (this.isDeleting && this.txt === '') { 
 
    this.isDeleting = false; 
 
    this.loopNum++; 
 
    delta = 500; 
 
    } 
 

 
    setTimeout(function() { 
 
    that.tick(); 
 
    }, delta); 
 
}; 
 

 
window.onload = function() { 
 
    new TxtRotate(document.getElementById('myInput'), ["PariMaria", "GentianAnnas", "LinneaSteliana", "UlisesCristobal", "SimonidesLonny"], 2000); 
 
};

<div class="form-group"> 
 
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
 
    <center><label class="heypal-label"><span id="heypal">HeyPal<span class="gray-lighter">.me/</span></span></label> 
 
     <input id="myInput" type="text" class="form-control conference-input"> 
 
     <button type="submit" class="btn btn-lg btn-danger btn-autosize">Go!</button></center> 
 
    </div> 
 
</div>

出典

2017-08-10 15:22:31

おかげではなく、スニペットにタイピングカルーセルは、プレースホルダ –

おっと、私はあなたが望んで実現しなかったではありません。私は私の答えを更新しました。 –

あなたがリンクする例では、CSSのスタイルを使用して入力用のキャレットを模倣しているため、正確にはできませんが、スパンの内側のHTMLを変更する代わりに、入力のplaceholder属性を変更しています。

let input = document.getElementById("myInput"); 
input.placeholder = 'my text';

は明らかに、上記の静的プレースホルダを設定しますが、あなたが提供した例は、プレースホルダのテキストを回転させるために使用するのと同じsetTimeoutダニの戦略を使用することはできません理由はありません。 |：

キャレットのように、私はちょうど「パイプ」記号を使用すると思います。それは完璧ではありませんが、それは十分に近いIMHOです。

出典

2017-08-10 15:19:24 Cappielung

あなたは、TxtRotateを再利用入力のプレースホルダプロパティを変更し、テキストにキャレット効果を追加することができ、このバージョン

<!DOCTYPE html> 
<html> 
<head> 
<link href="https://fonts.googleapis.com/css?family=Raleway:200,100,400" rel="stylesheet" type="text/css" /> 
<meta charset="ISO-8859-1"> 
<title>Insert title here</title> 
<script> 
var TxtRotate = function(el, toRotate, period) { 
     this.toRotate = toRotate; 
     this.el = el; 
     this.loopNum = 0; 
     this.period = parseInt(period, 10) || 2000; 
     this.txt = ''; 
     this.tick(); 
     this.isDeleting = false; 
    }; 

    TxtRotate.prototype.tick = function() { 

     var i = this.loopNum % this.toRotate.length; 
     var fullTxt = this.toRotate[i]; 

     if (this.isDeleting) { 
     this.txt = fullTxt.substring(0, this.txt.length - 1); 
     } else { 
     this.txt = fullTxt.substring(0, this.txt.length + 1); 
     } 

     this.el.value =this.txt; 

     var that = this; 
     var delta = 300 - Math.random() * 100; 

     if (this.isDeleting) { delta /= 2; } 

     if (!this.isDeleting && this.txt === fullTxt) { 
     delta = this.period; 
     this.isDeleting = true; 
     } else if (this.isDeleting && this.txt === '') { 
     this.isDeleting = false; 
     this.loopNum++; 
     delta = 500; 
     } 

     setTimeout(function() { 
     that.tick(); 
     }, delta); 
    }; 

    window.onload = function() { 
     var element = document.getElementById('myInput'); 
     var toRotate = element.getAttribute('data-rotate'); 
     var period = element.getAttribute('data-period'); 
     new TxtRotate(element, JSON.parse(toRotate), period); 

     } 


</script> 
</head> 
<body> 
    <div class="form-group"> 
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
     <center><label class="heypal-label"><span id="heypal">HeyPal<span class="gray-lighter">.me/</span></span></label> 
     <input id="myInput" type="text" class="form-control conference-input" 

    data-period="2000" 
    data-rotate='[ "nerdy.", "simple.", "pure JS.", "pretty.", "fun!" ]'> 
     <button type="submit" class="btn btn-lg btn-danger btn-autosize">Go!</button></center> 
     </div> 
    </div> 

</body> 
</html>

出典

2017-08-10 15:32:56 volkinc

を試すことができます。

var TxtRotate = function(el, toRotate, period) { 
    this.toRotate = toRotate; 
    this.el = el; 
    this.loopNum = 0; 
    this.period = parseInt(period, 10) || 2000; 
    this.txt = ''; 
    this.tick(); 
    this.isDeleting = false; 
}; 

TxtRotate.prototype.tick = function() { 
var i = this.loopNum % this.toRotate.length; 
var fullTxt = this.toRotate[i]; 

if (this.isDeleting) { 
    this.txt = fullTxt.substring(0, this.txt.length - 1); 
} else { 
    this.txt = fullTxt.substring(0, this.txt.length + 1); 
} 

this.el.placeholder = this.txt + '|'; 

var that = this; 
var delta = 300 - Math.random() * 100; 

if (this.isDeleting) { delta /= 2; } 

if (!this.isDeleting && this.txt === fullTxt) { 
    delta = this.period; 
    this.isDeleting = true; 
} else if (this.isDeleting && this.txt === '') { 
    this.isDeleting = false; 
    this.loopNum++; 
    delta = 500; 
} 

setTimeout(function() { 
    that.tick(); 
    }, delta); 
}; 

window.onload = function() { 
    new TxtRotate(document.getElementById('myInput'), [ "nerdy.", "simple.", "pure JS.", "pretty.", "fun!" ], 2000); 
};

出典

2017-08-10 15:43:12 ashleyr

入力プレースホルダ内に入力カルーセルを作成するにはどうすればよいですか？

答えて

関連する問題