问题描述：

Please see the image with two line in the text box one being place holder 如何创建与HTML两行文本框 - 占位符是完整

我想创建等安装在HTML，JS的图像文本框。请分享一些想法。

在图像可以看到3案件

首页 - 成功案例

中东 - 当电话号码是空的文本框显示有占位PHONE NUMBER默认

底占位上显示出来顶部，而用户输入的电话号码

为什么要显示三种情况;你只需要第一个答案？ – ak2ln

我已经显示了三种情况来显示文本框的状态。我正在寻找想法 – user2746732

答

例1

我有一个例子，可以帮助你understan你提出的这个问题。

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

对不起，这是无关紧要的。 – user2746732

答

当然可以，你需要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/

你想在这里做什么。我想知道两个文本框！ – user2746732

首先属于文本的值，然后模糊它，当textarea没有点击...你可以删除其中一个textareas（或添加更多），这种方式适用于所有浏览器 – AnasSafi

你给出的答案不需要任何Jquery！只需在bootstrap中使用占位符我的问题不同。我正在尝试构建一个带有一个占位符和用户输入的另一个值的文本框。（占位符应始终可见） – user2746732

答

例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

我感谢您的努力，但我认为您没有遵循我的问题。我正在寻找带有占位符的文本框，该占位符在我们输入任何文本时始终保持不变。（它不是关于验证）。请仔细阅读屏幕截图了解 – user2746732

答

例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

如何创建与HTML两行文本框 - 占位符是完整

例1

例2

例3

相关推荐