占位符文本在文本区域内被剪切

Posted

技术标签:

【中文标题】占位符文本在文本区域内被剪切【英文标题】:placeholder text getting cut inside a textarea 【发布时间】:2013-07-07 23:14:30 【问题描述】:
<textarea class="skinCondition-field vlongtext clear ui-input-text ui-body-d ui-corner-all ui-shadow-inset" type="text" placeholder="Update details of your present skin condition (e.g. normal, dry, flaky, etc). Optionally, add details of any past skin conditions, medication or skin treatments/surgeries undergone. You may also upload images/reports, so that doctors understand your condition better." value=""></textarea>

CSS:

textarea.ui-input-text.skinCondition-field 
    height:10.5em;
    white-space: normal;
    word-wrap: break-word;
    display: block;     
    word-wrap: break-word !important;
    white-space: normal!important;
    width: 100%;

尝试过

textarea.ui-input-text.skinCondition-field::-webkit-input-placeholder white-space: normal!important; word-break: break-all !important;word-wrap: break-word !important;

但问题在 Galaxy s3 中仍然存在。

【问题讨论】:

这个问题你解决了吗? 【参考方案1】:

我不确定,但请尝试删除您的课程然后尝试

<textarea type="text" placeholder="Update details of your present skin condition (e.g. normal, dry, flaky, etc). Optionally, add details of any past skin conditions, medication or skin treatments/surgeries undergone. You may also upload images/reports, so that doctors understand your condition better." value=""></textarea>

【讨论】:

【参考方案2】:

看看this FIDDLE 是否有帮助。 !

点击以上链接。

textarea.ui-input-text.skinCondition-field 
    height:10.5em;
    white-space: normal;
    word-wrap: break-word;
    display: block;     
    word-wrap: break-word !important;
    white-space: normal!important;
    width: 100%;

编辑: 在这里,在这种情况下,提问者需要一个多行占位符! 你可以通过这种方式得到同样的结果:

#text1::-webkit-input-placeholder::after 
    display:block;
    content:"Line 2\A Line 3";




#text2::-webkit-input-placeholder
    color:transparent;


#text2::-webkit-input-placeholder::before 
    color:#666;
    content:"Line 1\A Line 2\A Line 3\A";

虽然,PLACEHOLDER 文本仅用于简短提示!因此,请改用&lt;title&gt; 来获取更长的文本。

【讨论】:

尝试将默认的&lt;meta&gt;标签替换为:&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" /&gt; 仍然无法正常工作,但在 android 2.3.3 中可以正常工作,但在 4.1.2 版本中无法正常工作 到底发生了什么!?将应用部署到设备时? 在模拟器 Android 2.3.3(它已经在其中工作)和 Android 4.1.2(不工作)中测试,也在 Galaxy S3(不工作)中测试。 让我将它部署到我的应用程序并查看 logcat !【参考方案3】:
$('textarea')
    .addClass('placeholder')
    .each(function () 
        $(this).val($(this).attr('placeholder'));
    )

$('textarea').bind(
    'focus': function () 
        var placeholder = $(this).attr('placeholder');
        $(this)
            .removeClass('placeholder');

        if ($(this).val() == placeholder) 
            $(this).val('');
        
    ,
    'blur': function () 
        var placeholder = $(this).attr('placeholder');

        if ($(this).val() == '') 
            $(this)
                .val(placeholder)
                .addClass('placeholder');
        
    
);

【讨论】:

以上是关于占位符文本在文本区域内被剪切的主要内容,如果未能解决你的问题,请参考以下文章

如何在资源管理器的文本区域中设置占位符的样式?

更改文本区域的占位符文本颜色

IE11 + jQuery 1.8.3:使用占位符动态添加的文本区域将文本设置为占位符

文本区域表单中的 Html 占位符文本

Html 文本区域占位符

HTML文本区域改变占位符的位置