Question

如何隐藏但不删除输入文本的一部分

在我的情况下，我有一个输入文本，其中包含一个ip +名称，我想隐藏ip但保留名称，仍然仍然使用.val();显示ip

<input type="text" id="my_url" value="192.168.3.15/name"/> <!-- hide ip -->

$('#my_url').val();

Answer 1

您可以采用四步法完成此操作。

在blur事件中执行以下操作。
为输入提供具有原始值的数据属性。
更改值以获得所需的显示值。
在focus上，更改回原始值。

Snippet 以便更好地理解：

$(function () {
  $("#my_url").blur(function () {
    $(this).attr("data-original", this.value);
    console.log(this.value);
    this.value = this.value.substr(this.value.indexOf("/"));
    console.log(this.value.substr(this.value.indexOf("/")));
  }).focus(function () {
    if ($(this).attr("data-original") != undefined)
    this.value = $(this).attr("data-original");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="my_url" value="192.168.3.15/name" />

更新：正如DenysSéguret在评论中提到的，上述计算价值时会出现问题。在这种情况下，我们也可以结合使用hidden输入：

$(function () {
  $("#my_url").on("input keyup", function () {
    $("#orig_url").val(this.value);
  }).blur(function () {
    $(this).attr("data-original", this.value);
    $("#orig_url").val(this.value);
    console.log(this.value);
    this.value = this.value.substr(this.value.indexOf("/"));
    console.log(this.value.substr(this.value.indexOf("/")));
  }).focus(function () {
    if ($(this).attr("data-original") != undefined)
    this.value = $(this).attr("data-original");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="my_url" value="192.168.3.15/name" />
<input type="hidden" id="orig_url" />

现在我们可以在计算中使用#orig_url的值。

Answer 2

这是我能想到的唯一的黑客攻击。这只是一个你需要解决的演示...你创建一个div，你可以放置IP值，或者你想要隐藏在文本输入中的任何值。该div必须具有与输入完全相同的文本属性，因为它将用于计算要隐藏的文本的宽度。

一旦我们有了这个宽度，我们只需应用否定的文本缩进。请注意，这只会在视觉上隐藏值，但用户仍然可以访问它...另外，不要忘记将此代码放在某个事件处理程序中以便在需要时进行更新。

$('#my_url').on('change',hide);
$('#my_url').on('keyup',hide);
var widthComputer = $('<div id="widthcomputer">');
function hide(){
  var ip = $('#my_url').val().split('/')[0];
  if($('#my_url').val().split('/').length>1){
  widthComputer.text(ip+'/');
  widthComputer.appendTo('body');
  console.log(widthComputer.width());
  $('#my_url').css('text-indent',widthComputer.width()*-1);
  }else{
   $('#my_url').css('text-indent',0);
  }
}
hide();

#widthcomputer{
    display:inline;
    font: 13.3333px Arial;
    top:-500px;
    position:absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="my_url" value="192.168.3.15/name"/>

编辑：我添加了事件和一些测试。如果有/，代码实际上隐藏了/（和/）左边的部分。如果不存在，则显示完整输入值。只是玩它，你会看到。

Answer 3

我认为这是你所期待的

<input type="text" id="my_url" actualvalue="192.168.3.15/name" value="/name"/>

<script>
    document.addEventListener("DOMContentLoaded", function (){
    console.log(document.getElementById("my_url").getAttribute("actualvalue"));
    });
</script>

它在控制台上打印192.168.3.15/name。

JavaScript隐藏输入文本的一部分

3 个答案: