如何在html中创建一个包含两行的文本框 - 占位符保持不变

时间：2015-07-20 01:32:17

标签： html html5

Please see the image with two line in the text box one being place holder

我想创建一个文本框，就像HTML，JS中附加的图像一样。请分享一些想法。

在图片中你可以看到3个案例

热门 - 成功案例

中间 - 电话号码为空时默认文本框显示占位符PHONE NUMBER

当用户输入电话号码时，底部占位符显示在顶部

4 个答案:

答案 0 :(得分：1)

是的，你可以，你需要JQuery来做到这一点...... 

var placeholder = 'This is a line \nthis should be a new line';
$('textarea').attr('value', placeholder);

$('textarea').focus(function(){
    if($(this).val() === placeholder){
        $(this).attr('value', '');
    }
});

$('textarea').blur(function(){
    if($(this).val() ===''){
        $(this).attr('value', placeholder);
    }    
});
textarea{
    width:300px;
    height:100px;
    color:gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<textarea></textarea>

<textarea></textarea>

来源：http://jsfiddle.net/airandfingers/pdXRx/247/

答案 1 :(得分：0)

示例1

我有一个例子可以帮助您理解您提出的这个问题。

<强> HTML 

<body ng-app>
  <label for="pN">Phone number:</label>
  <input id="pN" type="text" value="1-800-CALL-MOM"></input>
<div style="height: 10px; border-bottom: 1px dotted silver;margin-bottom: 10px;"></div>

<div class="wrapper">PhoneNumberToDisplay: <div id="out1"></div></div>

<div class="wrapper">Letters Converted: <div id="out2"></div></div>

<div class="wrapper">PhoneNumberToDial: <div id="out3"></div></div>


  <div id="out4"></div>
  <div id="out3"></div>
</body>

<强> CSS 

* { font-family: sans-serif; padding: 4px; }
#out1,#out2,#out3 { color: #999; display: inline-block;}
#out1 {
  font-weight: bold;
}

<强>的JavaScript 

var phoneLetterToDigit = ['2','2','2','3','3','3','4','4','4','5','5','5','6','6','6','7','7','7','7','8','8','8','9','9','9','9'];

var raw = '';
var digitsReplaced = '';
var numbersOnly = '';

$('#pN').keyup(function () {
  update();
});

function update() {
  raw = $("#pN").val();
  digitsReplaced = '';

  $.each(raw.split(''), function(a,b) {
    var l = b.toUpperCase().charCodeAt(0) - 65;

    if (l >= 0 && l <= 25) {
       digitsReplaced += phoneLetterToDigit[l];
    }
    else {
      digitsReplaced += b;
    }
  });

  numbersOnly = digitsReplaced.replace(/[^0-9.]/g,'');

  $("#out1").html(raw);
  $("#out2").html(digitsReplaced);
  $("#out3").html(numbersOnly);
}

update();

您可以在此处查看此行为：

JSFIDDLE

答案 2 :(得分：0)

示例2

我想再次尝试帮助您使用其他代码示例。

<强> HTML 

<h1>Phone field scrubbing utility</h1>

<ul>
    <li>Enter any content (characters, puntuation, etc.)</li>
    <li>As long as there are 10 digits it will validate true</li>
    <li>Providing the first digit is not 0 or 1</li>
    <li>And providing there is not 1 digit repeated 10 times</li>
    <li>The &quot;format it&quot; button will do just that</li>
    <li>The &quot;submit it&quot; button will strip out everything but digits</li>
</ul>

<input class="phone" id="phone1" value="XXXXXXXXXX"><br>
<input class="phone" id="phone1" value="XXXXXXXXXX"><br>
<input class="phone" id="phone1" value="XXXXXXXXXX"><br>
<input type="button" id="format" value="format it">
<input type="button" id="submit" value="submit it">

<强> CSS 

body{
  font-family: Arial, sans-serif;
  margin: 25px;
}
input{
    font-size: xx-large; 
    border: 2px solid #555;
    margin: 10px;
    padding: 10px;
}
.on{
    border: 2px dashed #555;
/*  background: rgba(255, 215, 0,.15);
    color: rgb(255, 215, 0);*/
}
.goodClass{
    /*border: 1px solid rgb(0, 255, 0);*/
    background: rgba(0, 255, 0, .15);
    color: rgb(0, 255, 0);
}
.badClass{
    /*border: 1px solid rgb(255, 0, 0);*/
    background: rgba(255, 0, 0,.15);
    color: rgb(255, 0, 0);
}

<强>的JavaScript 

$(function(){
    $('#phone1').phoneScrubber({
            focusClass: 'on',
            goodClass: 'goodClass',
            badClass: 'badClass',
            testOnKeyup: true
    });

    $.fn.phoneScrubber.formatAll();

    $('#format').click(function(){
        $.fn.phoneScrubber.formatAll();
    });

    $('#submit').click(function(){
        if($.fn.phoneScrubber.validateAll()){
            $.fn.phoneScrubber.submitAll();
        }
    });
});

(function($) {
    $.fn.phoneScrubber = function(opts) {

        var
        obj = this,
            defaults = {
                    phoneCleaner    : /\D/g 
                    , repeated      : /(.)\1{9,}/g
                    , minLen        : 10
                    , omit          : [0, 1]
                    , format        : '() -'
                    , focusClass    : null
                    , testOnKeyup   : true
                    , goodClass     : null
                    , badClass      : null
                    , formatOnBlur  : false
            }, settings = $.extend({}, defaults, opts)
                    , testStr
                    , aFormat   = settings.format.split('')
                    , pre1      = aFormat[0]
                    , pre2      = aFormat[1] + aFormat[2]
                    , sep       = aFormat[3]
                    , message   = ''
                    , part1     = ''
                    , part2     = ''
                    , part3     = ''
                    , returnVal = ''
                    , setVal
                    , test
                    , cleanIt
                    , formatNumber
                    , cleanNumber
                    , errCount  = 0
                    , errs      = []
                    ;

        return this.each(function() {

            test = function(dirty) {
                var test        = dirty.replace(settings.phoneCleaner,'')
                    , testLen   = test.length
                    , startChar = parseInt(test.substring(0,1))
                    , testStr   = test.substring(0,10)

                if(testLen < settings.minLen){
                    // message = 'invalid length: '+testLen;
                    // alert(message);
                    return false;
                }

                if(settings.omit.indexOf(startChar)!==-1){
                    // message = 'First character cannot be '+startChar;
                    // alert(message);
                    return false;
                }

                if(testStr.match(settings.repeated)){
                    // message = "Nice try... repeated characters";
                    // alert(message);
                    return false;
                }
                return true;
            }

            cleanIt = function(dirty){
                return dirty.replace(settings.phoneCleaner,'');
            }         

            $.fn.phoneScrubber.formatNumber = function(dirty) {
                var clean = cleanIt(dirty);
                clean = clean.substring(0, settings.minLen)
                part1 = clean.substring(0,3);
                part2 = clean.substring(3,6);
                part3 = clean.substring(6,10);

                returnVal = pre1+part1+pre2+part2+sep+part3;
                return returnVal;
            }

            $.fn.phoneScrubber.cleanNumber = function(dirty) {
                var clean = cleanIt(dirty);
                clean = clean.substring(0, settings.minLen)
                return clean;
            }

            $.fn.phoneScrubber.formatAll = function(){
                obj.each(function(){
                    var $this = $(this);
                    if(test($this.val())){
                        $this.val($.fn.phoneScrubber.formatNumber($this.val()));
                    }
                });
            }

            $.fn.phoneScrubber.validateAll = function(){

                var returnVal = true;

                errs = [];

                obj.each(function(){
                    if (test($(this).val())==false){
                        returnVal = false;
                        errs.push(this);
                    }
                });
                return returnVal;
            }

            $.fn.phoneScrubber.getErrFields = function(){
                return errs;
            }

            $.fn.phoneScrubber.submitAll = function(){
                obj.each(function(){
                    var $this = $(this);
                    if(test($this.val())){
                        $this.val($.fn.phoneScrubber.cleanNumber($this.val()));
                    }
                });
            }

            obj.focus(function() {
                $(this).addClass(settings.focusClass);
            })
                .keyup(function() {
                    var $this = $(this);
                    if(settings.testOnKeyup){
                        if(test($this.val())){
                            // good
                            $this
                                .removeClass(settings.badClass)
                                .addClass(settings.goodClass);
                        }else{
                            // bad
                            $this
                                .removeClass(settings.goodClass)
                                .addClass(settings.badClass);
                        }
                    }
            })
                .blur(function() {
                    var $this = $(this);
                    $this.removeClass(settings.focusClass);
                    if(test($this.val())){
                        if(settings.formatOnBlur){
                            $this.val(formatNumber($this.val()));
                    }
                }
            });
        });
    }
})(jQuery);

源代码：JSFIDDLE

答案 3 :(得分：0)

示例3

我希望最终帮助你。

<强> HTML 

<textarea class='autoExpand' rows='3' data-min-rows='3' placeholder='Auto-Expanding Textarea'></textarea>

<textarea class='autoExpand' rows='3' data-min-rows='3' placeholder='Auto-Expanding Textarea'></textarea>

<textarea class='autoExpand' rows='3' data-min-rows='3' placeholder='Auto-Expanding Textarea'></textarea>

<强> CSS 

body{ background:#728EB2; }

textarea{  
  display:block;
  box-sizing: padding-box;
  overflow:hidden;

  padding:10px;
  width:250px;
  font-size:14px;
  margin:50px auto;
  border-radius:8px;
  border:6px solid #556677;
}

<强>的JavaScript 

$(document)
    .one('focus.textarea', '.autoExpand', function(){
        var savedValue = this.value;
        this.value = '';
        this.baseScrollHeight = this.scrollHeight;
        this.value = savedValue;
    })
    .on('input.textarea', '.autoExpand', function(){
        var minRows = this.getAttribute('data-min-rows')|0,
             rows;
        this.rows = minRows;
    console.log(this.scrollHeight , this.baseScrollHeight);
        rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 17);
        this.rows = minRows + rows;
    });

这次我试着像你说的那样做。

源代码：JSFIDDLE

相关问题
最新问题