求助，uniapp开发的小程序怎么实现一个input框中的placeholder换行展示？

分类：uni-app

uniapp

需求：想在一个input框中展示两种语言的placeholder，效果如下图

在网上查了一些资料，都是在placeholder的内容中增加换行符来实现，代码如下：

<u--input v-model="data.form.phoneNum" border="bottom" :placeholder="`请输入手机号\r\nتېلېفون نومۇرىڭىزنى كىرگۈزۈڭ`"  
            maxlength="11" :customStyle="inputCustomStyle" inputAlign='right'>  
</u--input>

<u-input v-model="data.form.password" border="bottom" :password="isPassword"  
    placeholder="请输入密码&#10;مەخپىي نومۇرنى كىرگۈزۈڭ" :customStyle="inputCustomStyle" inputAlign='right'>  
</u-input>

这两种方案在模拟器上可以，ios端微信小程序也可以，但是安卓端微信小程序上不起作用。
求教各位大佬，这种效果还有其他方案可以实现吗？

2024-03-21 18:26 负责人:无分享

1 个回复

喜欢技术的前端 - QQ---445849201

直接用 input android 可以的

<template>  
    <view>  

        <input type="text" v-model="password" border="bottom"  class="input"  
            placeholder="请输入密码&#10;مەخپىي نومۇرنى كىرگۈزۈڭ">  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                password:''  
            }  
        },  
        methods: {  

        }  
    }  
</script>  

<style>  
    .input{  
        height: 100rpx;  
        border: 1px solid #f1f1f1;  
        padding: 0 30rpx;  
    }  
</style>

4***@qq.com (作者)

感谢回复！不好意思是我描述的不清楚，我想说的是安卓手机上的小程序不起作用，不是安卓app不起作用。。

2024-03-22 10:15

喜欢技术的前端

回复 4***@qq.com: 改造了下，你试试

<template>  

    <view>  

        <input type="text" v-model="password" border="bottom" class="input" v-if="isFocus" @blur="blurFun"  

            :focus="isFocus">  

        <view class="placeholder-class input" v-else @click="focusFun">  

            请输入手机号</br>تېلېفون نومۇرىڭىزنى كىرگۈزۈڭ  

        </view>  

    </view>  

</template>  



<script>  

    export default {  

        data() {  

            return {  

                password: '',  

                isFocus: false  

            }  

        },  

        methods: {  

            focusFun() {  

                this.isFocus = true  

            },  

            blurFun() {  

                this.isFocus = this.password ? true:  false   

            }  

        }  

    }  

</script>  



<style>  

    .placeholder-class {  

        color: #999;  

    }  

    .input {  

        font-size: 28rpx;  

        height: 100rpx;  

        padding: 0 30rpx;  

        border: 1px solid #f1f1f1;  

    }  

</style>

2024-03-22 12:26

要回复问题请先登录或注册

求助，uniapp开发的小程序怎么实现一个input框中的placeholder换行展示？

1 个回复

公告

相关问题

求助，uniapp开发的小程序怎么实现一个input框中的placeholder换行展示？

与内容相关的链接

1 个回复

公告

相关问题