Question

我很好奇如何在CSS / Javascript中实现渐进/动态占位符，如下例所示。

PS。我知道在发布到SO之前我们需要展示一些工作/努力。但我有点混淆搜索什么来获取相关信息

Answer 1

使用<input placeholder=""或setTimeout为动画循环设置setInterval属性。

一个更简单的版本只是使用setTimeout而不是动画循环来阻止一堆未来的更新，因为我觉得它更简单 - 尽管这种方法无法扩展。

var finalPlaceholderText = "foo bar baz";
var input = document.getElementById( 'idOfTextBox' );    

var placeholderIndex = 0;
for( var i = 0; i < finalPlaceholderText.length; i++ ) {

    setTimeout( 
        function( length ) {
            input.placeholder = finalPlaceholderText.substring( 0, i );
        }
    , i * 500, i );
}

请注意，您需要将length（i）作为参数传递到setTimeout回调中，因为JavaScript的闭包将使用 last 值for循环结束后，而不是每次调用setTimeout时使用的值。

使用setTimeout - 循环，它看起来像这样（注意缺少for循环）：

var finalPlaceholderText = "foo bar baz";
var input = document.getElementById( 'idOfTextBox' );

function incrementPlaceholderText( i ) {
    input.placeholder = finalPlaceholderText.substring( 0, i );

    if( i < finalPlaceholderText.length ) {
        setTimeout( incrementPlaceholderText, 500, i + 1 );
    }
}

incrementPlaceholderText( 0 );

或更一般地说（以支持多个输入元素和不同占位符文本的方式）：

function incrementPlaceholderText( input, finalText, i ) {
    input.placeholder = finalText.substring( 0, i );

    if( i < finalText.length ) {
        setTimeout( incrementPlaceholderText, 500, input, finalText, i + 1 );
    }
}

incrementPlaceholderText( document.getElementById( 'idOfTextBox1' ), "foo bar baz", 0 );
incrementPlaceholderText( document.getElementById( 'idOfTextBox2' ), "foo bar baz qux", 0 );

Answer 2

希望这段代码有用。添加了评论以澄清

//create a variable. This will be used to create substring
var initialChar = 0;
//get the element and placeholder
let getElement = document.getElementById('inputElem');
let getPlaceHolderText = getElement.getAttribute('placeholder');
//create IIFE and this will be called as long as placeholder is not 
//completly created
(function setPlaceholder() {
  //settime out function to input one text at a time
  let clearNow = setTimeout(function() {
    // increase the count
    initialChar++;
    //create a substring and set this value as placeholder
    let getChar = getPlaceHolderText.substring(0, initialChar);
    getElement.setAttribute('placeholder', getChar + '|')
    // when the variable value and length of string
    // is equal it mean all the placeholder text has been created
    // if not equal then add next character to placeholder
    if (initialChar !== getPlaceHolderText.length) {
      // calling the IIFE
      setPlaceholder()
    } else {
      // equal so remove the pipe(pipe to create cursor effect)
      getElement.setAttribute('placeholder', getElement.getAttribute('placeholder').slice(0, -1));
      clearTimeout(clearNow);
    }
  }, Math.ceil(Math.random() * 150)) // any random number
}())

<input type="text" placeholder="Add you text here" id="inputElem">

Answer 3

您可以使用setInterval功能：

＆＃13;

var finalPlaceholderText = "foo bar bazaazz";
var input = document.getElementById('idOfTextBox');
var len = finalPlaceholderText.length;
var timerID;
var counter = 0;

if (counter <= len) {
  timerID = setInterval(function() {
    counter = counter + 1;
    typewriter(counter)
  }, 100);
}

function typewriter(i) {
  input.placeholder = finalPlaceholderText.substring(0, i);
  if (i === len) {
    counter = 0;
    //comment out below if you want it to stop
    //clearInterval(timerID)
  }
}

＆＃13;

<input id="idOfTextBox" placeholder="" />

＆＃13;

Answer 4

在检查了消息来源后发现已经为此建立了一个很棒的库。

https://github.com/chinchang/superplaceholder.js

渐进输入占位符

4 个答案: