Question

我正在尝试使用javascript（和jQuery）重新创建或模仿（HTML的）占位符行为。

谁能告诉我我将如何实现这一目标？我尝试使用以下代码：

    d3.csv("publications.csv", function(error, links) {
var nodes = {};
links.forEach(function(link) {
    link.source = nodes[link.source] || 
        (nodes[link.source] = {name: link.source}); 
    link.target = nodes[link.target] || 
        (nodes[link.target] = {name: link.target});    

});
var width = 1500,
    height = 500;


var force = d3.layout.force()
    .nodes(d3.values(nodes))
    .links(links)
    .size([width, height])
    .linkDistance(180)
    .charge(-300)
    .on("tick", tick)
    .start();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.append("svg:defs").selectAll("marker")
    .data(["end"])      
  .enter().append("svg:marker")    
    .attr("id", String)
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 15)
    .attr("refY", -1.5)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
  .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

var path = svg.append("svg:g").selectAll("path")
    .data(force.links())
  .enter().append("svg:path")
    .attr("class", "link")
    .attr("marker-end", "url(#end)")
    .style("stroke","#eee")
    .on("click", click);

var node = svg.selectAll(".node")
    .data(force.nodes())
  .enter().append("g")
    .attr("class", "node")
    .on("click", click)
    .call(force.drag);


node.append("circle")
    .attr("r", 15)
    .style("fill","lightcoral")
    .style("stroke","red");


node.append("text")
    .attr("x",20)
    .attr("dy", ".65em")
    .text(function(d) { return d.name; });


node.on("click", function )




function tick() {
    path.attr("d", function(d) {
        var dx = d.target.x - d.source.x,
            dy = d.target.y - d.source.y,
            dr = Math.sqrt(dx * dx + dy * dy);
        return "M" + 
            d.source.x + "," + 
            d.source.y + "A" + 
            dr + "," + dr + " 0 0,1 " + 
            d.target.x + "," + 
            d.target.y;
    });
    node
        .attr("transform", function(d) { 
   return "translate(" + d.x + "," + d.y + ")"; });
}
function click() {
    d3.select(this).select("circle").transition()
        .duration(750)
        .attr("r",6)
        .style("fill", "#ccc");


}



});

$(document).ready(function () {
    //On init:
    var initPlaceholderTxt = $("p").text();

    //Execution:

    //Using this, placeholder will not display correct information, 
    //lacking a previous clicked character:
    $("#test").on("keydown", function (event) {
        var value = $(this).val();
        $("p").text(value);
    });

    /*
    //Core feature:
     $("#test").keyup(function() {
          var value = $( this ).val();
      if(value != null && value != "") {
                $("p").text(value);
      }
      else {
            $("p").text(initPlaceholderTxt);
      }
    });

    //Make characters appear more dynamically or faster:
    $("#test").keydown(function() {
          var value = $( this ).val();
          $("p").text(value);
    });
    */
});

JSFiddle

我的主要部分正在工作，但是我正在尝试使其更加动态。当用户在定义了占位符的默认输入中键入内容时，按下键的瞬间，框中将出现一个字符，而占位符将消失。这最后一部分似乎与我当前的代码无关。

当我按下一个键时，占位符已经尝试在将新字符添加到输入中之前更改其文本值。

Most会说对此的一种解决方案是使用<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <textarea id="test"></textarea> <p>Placeholder text</p> <textarea placeholder="example"></textarea>。但是，也使用keyup有一个弊端，因为当按下一个键时，它不会使字符动态地出现在蝙蝠的右边。请让我知道如何解决这个问题。

编辑：底部的文本区域是显示预期行为的示例。段落元素应该像您在示例中看到的那样（充当）任何占位符文本。

Answer 1

使用attr将动态值设置为占位符

$("#ELEMENT").attr("placeholder","example");

Code

Answer 2

当我按下一个键时，占位符已经尝试在将新字符添加到输入中之前更改其文本值。

但是，使用键控还有一个缺点，因为它不会使按下按键时角色动态显示在蝙蝠的右边。

那为什么不同时使用keyup和keydown？

您可以在空格分隔的列表中为.on()的第一个参数使用多个事件。

编辑

底部文本区域是显示预期行为的示例。

我使用添加/删除类编辑了演示，该类使第二个<textarea>占位符变为灰色...请注意，我给了它id;）

$(document).ready(function() {
  //On init:
  var initPlaceholderTxt = $("p").text();
  
  //Execution:
  $("#test").on("keyup keydown", function( event ) {  
    var value = $( this ).val();
    $("p").text(value); // Just for the testing, I assume...
    
    $("#mainTextArea").text(value).removeClass("placeholder");
    
    
    // Restore the placeholder if the input is empty
    if(value==""){
      $("p").text(initPlaceholderTxt); // Just for the testing, I assume...
      
      $("#mainTextArea").text(initPlaceholderTxt).addClass("placeholder");
      
    }
  });

});

.placeholder{
  color:grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea id="test"></textarea>
<p>Placeholder text</p>
<textarea placeholder="example" id="mainTextArea"></textarea>

没有<p>元素和placeholder属性的简单演示：

$(document).ready(function() {
  //On init:
  var initPlaceholderTxt = "Placeholder text";
  $("#mainTextArea").text(initPlaceholderTxt).addClass("placeholder");
  
  //Execution:
  $("#test").on("keyup keydown", function( event ) {  
    var value = $( this ).val();    
    $("#mainTextArea").text(value).removeClass("placeholder");
    
    // Restore the placeholder if the input is empty
    if(value==""){
      $("#mainTextArea").text(initPlaceholderTxt).addClass("placeholder");
    }
  });

});

.placeholder{
  color:grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea id="test"></textarea>
<br>
<textarea id="mainTextArea"></textarea>

Answer 3

希望这会像魅力一样工作。谢谢。

  var initPlaceholderTxt = $("p").text();
  $("#test").on("keydown", function( event ) {
    var value = $( this ).val();
    $("p").text(value);
    $("#desc").text(value);
  });

Answer 4

尝试此操作。您应检查输入值的长度。然后根据需要应用占位符

添加更多事件输入键盘以提高准确性

$(document).ready(function() {
  var initPlaceholderTxt = $("p");
initPlaceholderTxt.text($(initPlaceholderTxt).attr('placeholder'))
  $("#test").on("keydown input keyup", function(event) {
    var value = $(this).val();
    if ($.trim(value)) {
      initPlaceholderTxt.text("")
    } else {
      initPlaceholderTxt.text($(initPlaceholderTxt).attr('placeholder'));
    }
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="test"></textarea>
<p placeholder="example"></p>
<textarea placeholder="example"></textarea>

Answer 5

$(document).ready(function() {
  //On init:
  var initPlaceholderTxt = $("p").text();
  $('#test').val('Text here');
  $('#test').css('color','grey');
  //Execution:
  $('#test').one('keypress',function(){
  $('#test').val('');
  $('#test').css('color','black');
  })
  //Using this, placeholder will not display correct information, 
  //lacking a previous clicked character:
  $("#test").on("keyup", function( event ) {
   
  	var value = $( this ).val();
  	$("p").text(value);
  });
  
  /*
  //Core feature:
	$("#test").keyup(function() {
  	var value = $( this ).val();
    if(value != null && value != "") {
  		$("p").text(value);
    }
    else {
    	$("p").text(initPlaceholderTxt);
    }
  });
  
  //Make characters appear more dynamically or faster:
  $("#test").keydown(function() {
  	var value = $( this ).val();
  	$("p").text(value);
  });
  */
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea id="test"  value="text"></textarea>
<p>Placeholder text</p>
<textarea placeholder="example"></textarea>

Answer 6

如果您不介意使用jQuery UI，则可以利用jQuery UI's position utility：

这是一个基本概念（如果您想使其成为通用插件）：

我将data-placeholder属性用作该元素占位符的元素的选择器。
在初始化期间，我将占位符文本保留在占位符数据originalText
在初始化期间，我在textareas数据placeholder中保留了对占位符元素的引用
最后，我将高度设为0的实际占位符，而不是对指针事件做出反应，以使所有点击均达到实际textarea。

	//On init:
  $('[data-placeholder]').each(function () {
  		var $parent = $($(this).attr('data-placeholder'));
      $(this).data('originalText', $(this).text());
      $(this).position({
      	of: $parent,
        my: 'top left',
        at: 'top left'
      });
      $parent.data('placeholder', $(this));
  	
  });
  
  //Execution:
  
  //Using this, placeholder will not display correct information, 
  //lacking a previous clicked character:
  $("#test").on("keyup", function( event ) {
  	if ($(this).data('placeholder') && $(this).val()) {
    	 $(this).data('placeholder').text('');
    } else {
    	 $(this).data('placeholder').text($(this).data('placeholder').data('originalText'));
    }  
  });

[data-placeholder] {
    z-index: 0;
    pointer-events: none;
    height: 0;
    overflow: visible;
    color: rgba(0, 0, 0, 0.5);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div>
  <textarea id="test"></textarea>
  <span data-placeholder="#test">Placeholder text</span>
</div>
<div>
  <textarea placeholder="example"></textarea>
</div>

Answer 7

我只是要添加es6 javascript版本，因为我真的希望在几年后会需要使用jQuery，因为它会被废弃。

简单地说，这是一个带有2个参数的函数：您的输入元素和您要赋予它的占位符，它将处理所有其余含义：

如果模糊事件为空，则重置为占位符
重置为空值
使用您的占位符值初始化它

当然还没有针对性能进行优化，但是应该可以帮助您。

const input = document.querySelector('input')


const placeholderCustom = (input, placeholder) => {
  !input.value ? input.value = placeholder : ''
  
  input.addEventListener('focus', () => {
    input.value === placeholder ? input.value = '' : placeholder
  })
  
  input.addEventListener('blur', () => {
    input.value === '' ? input.value = placeholder : ''
  })
  
  
  input.addEventListener('input', () => {
    input.value === placeholder ? input.value = '' : ''
  })
  
  
}

placeholderCustom(input, 'That is your placeholder')

<input type="text">

使用JavaScript模仿占位符行为

7 个答案: