时间戳

首页 > 解决方案 > 拉出占位符的一部分并放置在移动输入字段上方

html - 拉出占位符的一部分并放置在移动输入字段上方

问题描述

当在桌面上以两种不同的样式查看时，我收到了在文本输入字段中包含 65 个字符的占位符的请求。但是，在平板电脑或移动设备上查看时，需要将部分占位符移动到输入字段上方。

占位符应在桌面上显示：“查找吉他专家。输入您的吉他品牌和型号...”

在平板电脑和移动设备上，需要将“查找吉他专家”移到输入字段上方，让占位符显示“输入您的吉他品牌和型号...”

我设法为占位符创建了两种样式，但我坚持使用在字段上方显示占位符第一部分的最佳方式，而不复制文本。这是我到目前为止所拥有的：

HTML

<div class="container test">
<div class="row">
<div class="col-sm-12">

<div class="guitar-service-address">
    <span class="placeholder-location">Find guitar repair specialist. <span class="font-alt">Enter your guitar make and model...</span></span>
  <input id="input" size="78" type="text" />&nbsp;
</div>
<p class="help-block">What is this?</p>

</div>
</div>
</div>

CSS

.guitar-service-address>span.placeholder-location {
  position: absolute;
  margin: 6px 8px;
  color: #686e74;
  cursor: auto;
  font: Helvetica 15px/20px bold;
  font-weight: bold;
  z-index: 1;
}

.guitar-service-address>span.placeholder-location>span.font-alt {
  color: #686e74;
  font-weight: normal;
}

 input {
  padding: 5px;
  font-size: 11pt;
  color: black;
  border: 1px solid #979797; 
  border-bottom: 4px solid #000;
}

.help-block {
  font-size: 90%;
}

.test {
  padding: 20px;
}

JS

$(function() {
    $("span.placeholder-location + input").keyup(function() {
        if($(this).val().length) {
            $(this).prev('span.placeholder-location').hide();
        } else {
            $(this).prev('span.placeholder-location').show();
        }
    });
    $("span.placeholder-location").click(function() {
        $(this).next().focus();
    });
});

这是 Liveweave 的链接： https ://liveweave.com/1TtCbY

标签： htmljquerycssinputplaceholder

解决方案

推荐阅读